Linking static images, but the generated link is from cloudfront (Amazon)

Support
1

Hey, Netlify and forum members!

I am using Pelican static site generator with Netlify.
Got a problem with linking static images.

I used RST to for the linking of static images. I had use two methods:

  1. Use of
    … image:: {static}/images/avatar-96x96.png
    This would generate HTML code that points to my current website (https://www.kappawingman.com)

  2. Use of
    … image:: /images/avatar-96x96.png
    This would generate HTML code that points to https://d33wubrfki0l68.cloudfront.net/7a9da5264559efa03703186b9f05406be3ae35a4/b49f6/images/avatar-96x96.png

I wonder why it would be like this for the second method. If I had CSP the image from Cloudfront may not be displayed.

Problem URL is
https://www.kappawingman.com/posts/bookmark/2020/08/03/bookmark-of-testing/

Thanks!

2

The Cloudfront link would be a tell-tale sign that asset optimisation is enabled for certain file formats. This could be configured in the UI or even possibly with the SSG?

3

For my site, the asset optimization is off for images:

URLs No URL processing
CSS Minify
JS Minify
Images No image processing

The two methods to link static images are used in the same page. I am not sure why they create a different result. I don’t think Pelican SSG have special methods to trigger the asset optimization.

4

Just found out that by using plain HTML for
<img src="/images/avatar-96x96.png" />
has the same result as ‘method 2’ in my first post.
Edit: it’s using RST with raw html, like:
… raw:: html
See: reStructuredText Directives

So, I think image coded as above or using method 2 are linked to external domain (Amazon) by default? I didn’t know about it because the images had been linking to my domain when I use Netlify for a few months.

5

When you have any optimizations on, we may optimize files you wouldn’t expect onto cloudfront. The only way to really prevent that is to disable all asset optimization with the checkbox at the top of the asset optimization config widget.

I have a bug report open on this since I don’t think it is intuitive, so we may change it someday, but it won’t be someday very soon based on our current roadmap, so just wanted to help you understand your options for today.

1 Like
6

Okay, I disabled asset optimization, now the second image don’t refer to cloudfront now.

<div>
<p>Use of .. image:: {static}/images/avatar-96x96.png</p>
<img alt="avatar" src="https://www.kappawingman.com/images/avatar-96x96.png"/>

<p>Use of .. image:: /images/avatar-96x96.png</p>
<img alt="avatar" src="/images/avatar-96x96.png"/>
1 Like