When I try to select the image and preview it. It shows below error in developer tool in the browser.
Refused to load the image ‘data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCADhAOEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT…KKKKAPJv2q/Dkvi/8AZp+Kej20Pn3l14a1AQRDrJKsDtGv/fSrX830N9X9TVfA3i7/AII3/BzxJr19qOna/wCKtChupHlOn2txbvBBubO2PdDuVR6MzUAfkR4btJvE2oQabD/r7u4S2T+P55Jdq1/Sx4X0caD4X0jTP+fCzhtv++EVf/Za+VvgR/wTL+EHwG8UWfiOH+2PE+t2dwtzZy65dr5MEg+6yQxIisV/6absH5uK+waACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//2Q==’ because it violates the following Content Security Policy directive: “img-src ‘self'”.
I have added below META tag on the page, and it works on my local pc but it is not working on server.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src 'self' data:; style-src 'self' 'unsafe-inline';" />
Below is the java script code where I preview the image on my page.
function previewImage(fileUpload, imgPreviewId) {
var file = fileUpload.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var imgPreview = document.getElementById(imgPreviewId);
imgPreview.src = e.target.result;
imgPreview.style.display = 'block';
}
reader.readAsDataURL(file);
}
else {
var imgPreview = document.getElementById(imgPreviewId);
imgPreview.src = '';
imgPreview.style.display = 'none';
}
}
Below is the VB code
<tr>
<td>
<div style="display: flex; gap: 10px; margin-top: 10px">
<asp:Label ID="frontimg" runat="server" Text="Front Image"></asp:Label>
<asp:FileUpload runat="server" ID="Frtimg" accept=".jpg,.png,.jpeg" onchange="previewImage(this, 'imgFrontPreview')"/>
<asp:HyperLink runat="server" ID="frontimgView" Text="View" Target="_blank"></asp:HyperLink>
</div>
</td>
<td>
<div>
<img id="imgFrontPreview" style="display: none; width: 200px; height: 150px; margin-top: 10px;" />
</div>
</td>
<td>
</td>
</tr>