Here is my Content-Security-Policy in index.html

<meta http-equiv=Content-Security-Policy content=default-src 'self' http://example.com>

Now i am dynamically setting img src of <img id=updateProfilePicPreview class=profilPicPreview src= /> as

  var smallImage = document.getElementById('updateProfilePicPreview');

  smallImage.style.display = 'block';

  smallImage.src = data:image/jpeg;base64, + imageData;

It shows

Refused to load the image 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygw…p+tB/yaKKAIi2TSfjRRVCJFOyIk96rE5NFFDGgoooqBhRRRQA9elIDg5oopgIc+lFFFAH/2Q==' because it violates the following Content Security Policy directive: default-src 'self' http://example.com. Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

So how can i enable setting img src dynamically ?

I was following this example from cordova page:

var pictureSource;   // picture source

var destinationType; // sets the format of returned value



// Wait for device API libraries to load

//

document.addEventListener(deviceready,onDeviceReady,false);



// device APIs are available

//

function onDeviceReady() {

    pictureSource=navigator.camera.PictureSourceType;

    destinationType=navigator.camera.DestinationType;

}



// Called when a photo is successfully retrieved

//

function onPhotoDataSuccess(imageData) {

  // Uncomment to view the base64-encoded image data

  // console.log(imageData);



  // Get image handle

  //

  var smallImage = document.getElementById('smallImage');



  // Unhide image elements

  //

  smallImage.style.display = 'block';



  // Show the captured photo

  // The in-line CSS rules are used to resize the image

  //

  smallImage.src = data:image/jpeg;base64, + imageData;

}



// Called when a photo is successfully retrieved

//

function onPhotoURISuccess(imageURI) {

  // Uncomment to view the image file URI

  // console.log(imageURI);



  // Get image handle

  //

  var largeImage = document.getElementById('largeImage');



  // Unhide image elements

  //

  largeImage.style.display = 'block';



  // Show the captured photo

  // The in-line CSS rules are used to resize the image

  //

  largeImage.src = imageURI;

}



// A button will call this function

//

function capturePhoto() {

  // Take picture using device camera and retrieve image as base64-encoded string

  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,

    destinationType: destinationType.DATA_URL });

}



// A button will call this function

//

function capturePhotoEdit() {

  // Take picture using device camera, allow edit, and retrieve image as base64-encoded string

  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,

    destinationType: destinationType.DATA_URL });

}



// A button will call this function

//

function getPhoto(source) {

  // Retrieve image file location from specified source

  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,

    destinationType: destinationType.FILE_URI,

    sourceType: source });

}



// Called if something bad happens.

//

function onFail(message) {

  alert('Failed because: ' + message);

}