Slow image loading

Support
, ,
5

So I think I have got to the bottom of what is happening, but not 100% sure what to do about it.

My latest thinking is that is the issue is nothing to do with the CDN per-se , but somewhere between how Vue stores image paths and how Netlify converts them to CDN URLs.

Consider the following:

  • A markdown page lists gallery image assets as an array in frontmatter:
    ./image-1.png, ./image-2.png, …

  • The page component determines the absolute image path:
    require(page folder path + image path)
    /blog/article/image-1.png, etc

  • The build copies all require()ed assets to a final folder, and generates final HTML:
    <img src=”/assets/img/image-1.76sgf4j43f.png”>

  • Netlify swaps out local image src values for CDN src values:
    http://cloudfront....image-1. 76sgf4j43f.png

When the app is running, it has no way to know what the final CDN URL of each image should be, so it loads the local image instead.

Here’s a page which should demonstrate the issue:

If you look at:

  • the source, you can see the the cloudfront URLs
  • the DevTools panel, you see the built asset URLs
  • the JavaScript (click tidy) you see the local asset paths

Is this a common problem?

I currently use a build step which injects images sizes into these arrays, but are there any solutions for paths; can I get the CDN URL at build time?