Images not showing with Large Media

Hi,
I’ve setup Netlify Large Media, but my images aren’t showing up on the site or in my tab under Settings. I’m using eleventy to generate the site through a GitHub repo.
Here’s an example from my site: https://goofy-fermi-1b5730.netlify.app/thoughts/goodbye-flickr/.
I went through previous support threads and confirmed that everything is as it should. I also have two “older” jpg and png files that were uploaded to GitHub before and aren’t being displayed now.
Thanks

Hi, @ironnysh, there are a few things which could be causing this. First, would you please run the following command in the local working directory for this repository:

git lfs push --all origin

Note, you might need to specify the branch with that command:

git lfs push --all origin master

After doing this, please try deploying again. If the images still don’t work after running this command and deploying a new build, please let us know.

Hi Luke,
Thanks for your reply.
I’ve just completed your recommended steps, but still no photos. Any other options? :slight_smile:

Hi Luke,
Just an update: I can see the references to the photos in my Large Media tab, but it’s still not showing on the website. They’re also doubled: showing photos that I’ve deleted from my repo.
Thanks

Hi, @ironnysh. Regarding the files reported by Large Media, files will only be listed if they are being tracked by Git LFS. You can see what Git LFS is tracking using this command:

git lfs ls-files

Do you see files listed by Large Media which are not in the output of the command above? If so, please send us the output of the command above.

Regarding the missing images, I believe that part of the issue is that some images being referenced at paths which are incorrect. Here is a image tag copied from the HTML returned by link above:

<img src="src/images/screenshot.png" alt="image" loading="lazy">

The src value is src/images/screenshot.png. This is a relative (not absolute) path so the URL for that image in the HTML is this:

https://goofy-fermi-1b5730.netlify.app/thoughts/goodbye-flickr/src/images/screenshot.png

There is no file at that path so the URL above is a 404 response. The correct path (at least what I’m assuming is the correct path) for this image is this:

https://goofy-fermi-1b5730.netlify.app/images/screenshot.png

That URL does show the image with a 200 response. This means the correct src value for that tag would be /images/screenshot.png instead of src/images/screenshot.png. This would be the corrected image tag:

<img src="/images/screenshot.png" alt="image" loading="lazy">

I don’t know how your sites is being built so I don’t know what change is required to get that result. This is the solution but how to achieve that will be up to you.

One question might be: So how do I see the actual path where my files are deployed?

One of the most direct ways to see the actual paths of deployed files is to download the deployed site with the button found on the page with the build logs for a specific deploy. The button has no text so I’m including a screenshot of where to find the download deploy button below (again, which is unlabeled and does not actually say “download deploy”):

download-deploy-button-small

Download that zip file and extract it. The paths to the files can then be determined by looking at the resulting directory structure.

Now, there could still be different issues with other images. For example, if your static site generator (SSG) is trying to base64 encode the image data as text embedded in the HTML, this won’t work because the static site generator won’t have access to the binary image during the build. The same applies if the SSG does image transformations at build time. We discuss this limitation in our documentation here. Quoting:

Files tracked with Large Media are uploaded directly to the Netlify Large Media storage service on push, completely bypassing the site build. This saves build time, but also means that the files are not available to tools that process asset files during the build, such as Hugo’s image processing or the gatsby-image plugin. Depending on your needs, you may be able to replace this functionality with Netlify’s image transformation service.

I did find a second issue. For some images, the issue is that our asset optimization is enabled but our asset optimization and Large Media are incompatible. Please disabled asset optimization completely here if you are using Large Media here:

https://app.netlify.com/sites/goofy-fermi-1b5730/settings/deploys#post-processing

Asset optimization is still enabled. All the sub-options are disabled asset optimization itself is still enabled and this won’t work. Either it must be disabled or the Large Media add-on for this site must be disabled. Again, using both at the same time is unsupported (as our documentation states).

Here is an example of an image tag which references our asset optimization URL fo the image:

<img src="https://d33wubrfki0l68.cloudfront.net/ed19843ede03c3a417acedf3cb1422a42830e39d/56ce9/images/screenshot.png" alt="image with another path" loading="lazy">

That URL works but returns the Git LFS pointer data, not the actual binary image data:

$ curl https://d33wubrfki0l68.cloudfront.net/ed19843ede03c3a417acedf3cb1422a42830e39d/56ce9/images/screenshot.png
version https://git-lfs.github.com/spec/v1
oid sha256:af2dbcba79e3820e47090e03a1d3e1173823963b99d67d0f93e5e5cb314af9d6
size 517987

The explanations for this can be found in the same Limitations section, again quoting:

Netlify Large Media is not compatible with Netlify’s built-in asset optimization. If you enable Netlify Large Media, you need to select Disable asset optimization in your site dashboard under Settings > Build & deploy > Post processing > Asset optimization .

So, there are two different issues for those two images. For the first image, the <img> tag will need to use the correct path to the image. For the second image, asset optimization must be disabled and a new deploy completed to resolve.

I haven’t checked all the images on the site but for these first two, the root causes are known and these are solutions to get those images working. I suspect most (if not all) of the other images of this site can be fixed with these two solutions.

If you see other images which are still not working after these two issues are addressed, please let us know.

Hi Luke,
Thank you very much for your help and detailed explanation! Everything works now that I’ve disabled the Asset optimization itself and not just the sub-options. Also fixed the various image paths I used while testing :slight_smile:

Regarding the first issue of duplicate files: if you look at my Large Media tab and search for logo.png (just an example), you will get two results: assets/images/logo.png and images/logo.png. However, the assets directory has been deleted from my repo a few days ago (both local and remote), and it also isn’t listed when I run git lfs ls-files. So, to answer your question, I do “see files listed by Large Media which are not in the output of the command above.” Can it be a cache thing?

Thanks again :pray:
Ronny

1 Like