Linking Images with LFS + Large Media

Hello, I’m having issues linking to my images properly after deploy. I’m new to Netlify, and after searching the community forums I haven’t found an answer.

Here’s the image paths in my repo:

Image Export code

Here’s how I’m displaying them:

Displaying image code

On my localhost it’s displaying fine, but when I previewed the deploy for the branch the image string looked like this:

style=“background-image:url(“data:image/png;base64,dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6MjhmMjVkZDY4MmViN2QyNTIxMWFkNWQwODNhODhlMjk1Zjk1YjA3MjRlNWZiN2FkNDMxN2EyYzM5YmNiM2UyYwpzaXplIDEyMTM5ODM3Cg==”);”

I feel that I am missing a step.

If you decode the base64 encoded data, this is the result:

$ echo -n "dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6MjhmMjVkZDY4MmViN2QyNTIxMWFkNWQwODNhODhlMjk1Zjk1YjA3MjRlNWZiN2FkNDMxN2EyYzM5YmNiM2UyYwpzaXplIDEyMTM5ODM3Cg==" | base64 --decode
version https://git-lfs.github.com/spec/v1
oid sha256:28f25dd682eb7d25211ad5d083a88e295f95b0724e5fb7ad4317a2c39bcb3e2c
size 12139837

What was encode was the LFS text pointer data, not the image itself. This is because one of the limitations for Large Media. Quoting that documentation:

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.

Base64 encoding the image requires access to the image during the build and that isn’t possible with Large Media as mentioned above.

If you want to uninstall Large Media based on this, please read the following support guide:

If you want Large Media uninstalled for this site please let us know and we’ll remove it. Likewise, if you delete the site and recreate it that will also remove the add-on but you still need to delete .lfsconfig manually.

If there are any questions please let us know and reply anytime if you want Large Media uninstalled for this site.