Refused to load the image because it violates the following Content Security Policy

Question

I am building an electron app with electron-forge,webpack and typescript. when I am trying to load a random image from google it is showing the error that

Refused to load the image 'https://example.com/static/branding/product-designkits-dark.svg' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.


Refused to load the image 'https://example.com/static/branding/product-designkits-dark.svg' because it violates the following Content Security Policy directive: "img-src 'self'".
 <meta http-equiv="Content-Security-Policy" content="img-src 'self'">

I have tried

  <meta http-equiv="Content-Security-Policy" content="img-src 'self' example.com">

But it is not working.

Answer 1

You should load the image from a local server instead. So am suggesting you cache or download the image to your local machine and specify the file location to the image resource.

• The local server for example would be your own computer ( your development machine) or the user of your application.

• You also need to download the image from the URI specified in the API results. Search the API's documentation for the image URI.

• Then download and save it temporarily on your local machine or server. Some API's change image URI (Spotify is an example), so saving the URI link might be a bad choice.

• Then specify the location to the downloaded image on the src attribute on img element used to display the image.

That is how I would do it.