Can't see all my images on large media

Support
1

Hello,

I’ve been googling it for a while and I think I must be missing something: I’ve installed git lfs and the netlify large media plugin on my repository, with a lfs rule of src/assets/photos/** filter=lfs diff=lfs merge=lfs -text, but none of the pictures in that folder show up in the Large Media tab. Also, as you can see, most pictures are missing from the website.

I tried deleting the website and remote repo and pushing it again but no success.

I ran git lfs push --all origin and got Post https://21ed6fbf-84dc-451a-b5e8-29f6e221ef68.netlify.com/.netlify/large-media/verify: unexpected EOF a few times. I tried running the command again and the upload is marked as successful almost instantly…

I’m new at both LFS and netlify large media so I might be missing something, though I’ve gone through https://answers.netlify.com/t/common-issue-troubleshooting-your-netlify-large-media-configuration/188 a few times already.

Here’s my netlify lm:info:

image
image760×118 17.3 KB

I would really appreciate any help with this.

2

HI, @Leolebleis, and welcome to the Netlify community site.

First, the images will only appear in the Large Media tab at Netlify, if they are being published as part of a site deploy. If you have images stored in Large Media which are not part of any deploys, we still store the image but it wont’ be listed in the file list in the web app user interface (UI). The files are only listed there if they are part of a site deploy.

I’m only showing two images currently published here. They would be shown at the two URLs:

https://lesmerisiers.netlify.app/logo192.png
https://lesmerisiers.netlify.app/logo512.png

Those two images are working with Large Media.

I looked at one of the missing images. Specifically, the image with the alt text “Les Merisiers logo”. This is the image source in the HTML:

<img src="data:image/png;base64,dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6NmQxMjc1YzA2Mzk0Y2FkMzQ4YzgxNjllMjcxOTQwN2FkMWU5NTBhNGQ0ZjQ0ZDYzOTczNjM4NzQ3NmZhNGJjYgpzaXplIDk3MzAK" width="30" height="30" alt="Les Merisiers logo">

Note, the image isn’t a URL but embedded base64 encoded image data. You can decode the data with the following command (this is MacOS):

$ echo "dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6NmQxMjc1YzA2Mzk0Y2FkMzQ4YzgxNjllMjcxOTQwN2FkMWU5NTBhNGQ0ZjQ0ZDYzOTczNjM4NzQ3NmZhNGJjYgpzaXplIDk3MzAK" | base64 -d
version https://git-lfs.github.com/spec/v1
oid sha256:6d1275c06394cad348c8169e2719407ad1e950a4d4f44d639736387476fa4bcb
size 9730

The output is a Git LFS pointer, not the image itself.

It appears the site build is attempting to process the raw image data and embedded that image as base64 encoded text in the HTML. However, with Large Media the raw image data isn’t available and therefore the text pointer data is encoded instead.

In other words, the encoding happens, it just encodes the wrong data - the pointer not the image.

This is a known limitation of Large Media and mentioned in the limitations section of the Large Media documentation, 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.

It won’t be possible to use Large Media with this site if you are doing image processing at build time. Transforming binary image data into base64 encoded text does qualify as “image processing”.

You can use third-party Git LFS services and still check out the binary data with the GIT_LFS_SKIP_SMUDGE=1 environment variable. This isn’t possible with Large Media though.

If there are other about this issue, please let us know.

1 Like