Cannot render image on index.html

[ntemposd]

Hi!

I'm working with the child theme and I'm trying to add an image right above the intro section on the homepage(layout/index.html).

My code looks like the following, I know the child is not that customizable but it renders perfectly on my local. The problem is I cannot make it work on netlify.

{{ define "main" }}
<section class="section-sm">
<div class="d-flex justify-content-center">
<img class="img-simple img-fluid blur-up border-0 rounded-circle ls-is-cached lazyloaded" src="https://pbs.twimg.com/profile_images/875029899614007298/NLZrk0Lw_400x400.jpg" data-src="https://pbs.twimg.com/profile_images/875029899614007298/NLZrk0Lw_400x400.jpg" width="125" height="125" alt="Alt_text">
</div>
</section>

I've added both the img-simple and img shortcodes but using them I cannot even render a photo on my local. 🙌

Any suggestion?

Thank you

[h-enk]

Hello @ntemposd, it looks like you're facing a Content Security Policy issue — you're serving an image from an other domain than your Netlify domain.

1. Copy ./node_modules/@hyas/doks/layouts/index.headers to ./layouts/index.headers

2. Add https://pbs.twimg.com to the img-src part of the Content-Security-Policy section in ./layouts/index.headers:

   ..
   Content-Security-Policy: default-src 'self'; manifest-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' https://pbs.twimg.com data:; script-src 'self'; style-src 'self'
   ..

Note, the image shortcodes only work with a markdown file + images in a page bundle. I'm not sure (I haven't tested that) if that's possible with the homepage (for it's a "special" page).

[ntemposd]

Works like a charm! Thank you ❤️