Home
Support Forums

No images on my site anymore :( (likely LFS related)

Hi everyone,

since I did some changes and redeployed my website yesterday I don’t get any images anymore. I’m quite unsure about the stuff happening behind the scenes from git-lfs and netlify large media - might need some clarification there.

I’m ending up with the “base64 encoded lfs pointers on my site”-issue. I already found countless threads on the topic and I see the issue is supposed to be “don’t do any build time stuff to your images”. I don’t remember changing anything in this regard though. I’m using very basic create-react-app configuration and tried explicitly setting “REACT_APP_IMAGE_INLINE_SIZE_LIMIT = 0” today.
When I build the site locally (“netlify build”), there is no base64 inlining happening. Also when I download the build through the netlify UI, there are no inlined images.

Also I don’t see any files in the “Large media” section of the netlify UI. And tbh I’m not even sure I need NLM or just use GIT LFS…?

Quite frustrating process to “just get images”, I hope someone will be able to help. Thanks in advance :slight_smile:

Hi, @schadenn. I took a look at the one site associated with the same email address used for this forum account that has Large Media enabled.

From what I can see, that site doesn’t actually use the Large Media instance for anything. (Although it is enabled it is not used from what I can see so far.)

In order to research this further it would help to know which deploy had the base64 encoded LFS pointers and which URL showed those pointers. Would you please send us that information?

You can post that information publicly or you can private message (PM) that to one of our support staff. I’ve confirmed that PMs are enabled for your community login. Please keep in mind that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

Also, would you please share with us the output of the following command run in the directory of the local copy of this site’s repo?

git lfs ls-files

This will show which files in the repo are using LFS.

That output and the information requested about (example deploy id and URL) will allow us to research this in more detail to see what is happening.

Hi Luke,

thanks for the reply. That explains some things. Though I’m still very unsure about why there were pictures before. :thinking:

All of my recent deploys had Base64 encoded pointers. Not really sure what information you need to identify the builds, but here’s some:

master@563ef3d. Sep 11 at 2:53 PM
build-image version: c6001ed68662a13e5deb24abec2b46058c58248a

It has this base64 encoded pointer for example:

data:image/jpeg;base64,dmVyc2lvbiBodHRwczovL2dpdC1sZnMuZ2l0aHViLmNvbS9zcGVjL3YxCm9pZCBzaGEyNTY6MTgxNWI4NWY5NDYxOWFjNDFjMDgyZjU3OWJlOWI0ZTc5YzA0Yzg4MTljNzg0NjhmNmM1Yjg0NWZiZGNjNWNmMQpzaXplIDM1NDIzNAo=

which decodes to:

version https://git-lfs.github.com/spec/v1
oid sha256:1815b85f94619ac41c082f579be9b4e79c04c8819c78468f6c5b845fbdcc5cf1
size 354234

Currently I rolled back to this one, in which the images are working fine:

master@5331686. May 15 at 9:22 PM
9:22:51 PM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302

This is the output of git lfs ls-files:

8e90661681 * src/static/img/bayrisch_sm.jpg
633a58b9f1 * src/static/img/beton.jpg
b5db69ab35 * src/static/img/gabi.jpg
df0442611e * src/static/img/gerd.jpg
1e57c8d77e * src/static/img/kehren_uebung.jpg
c67c86b618 * src/static/img/kehren_uebung_sm.jpg
b0366c19f6 * src/static/img/sabine.jpg
abd4733269 * src/static/img/saveTheDateBack.jpg
1815b85f94 * src/static/img/saveTheDateBack_sm.jpg
227042cd05 * src/static/img/saveTheDateFront.jpg
cd9b5dc89c * src/static/img/saveTheDateFront_sm.jpg
4adf559e49 * src/static/img/siggo.jpg

Now I somehow can’t roll back to a working build anymore :face_with_raised_eyebrow:

Hope you can help :slight_smile:

Edit: Okay this is even more strange. When I opened this thread I just clicked “Publish deploy” on an old build when I saw the images weren’t loading and everything was working fine again.
This doesn’t seem to be working anymore though. Now even if I click “Preview deploy” on the same one that was working 3 days ago, it’ll open a page which has the old code state, but still has Base64 encoded pointers now instead of the working images. :man_shrugging:

Hi, @schadenn. The build image version and deploy ids are different things. The deploy id can be found in several ways. For example, if you are looking at the details of a deploy in our web UI the URL in the address bar would look something like this:

https://app.netlify.com/sites/<site-subdomain-here>/deploys/613f058bc187a6d01ba6238d

In the example above, the deploy id is 613f058bc187a6d01ba6238d.

However, don’t need to send us those because your response was thorough enough that I can answer without that information.

The most common way to base64 encode an image into HTML is via an automated process during the site build. However, because the actual image isn’t available during the site build when Large Media is in use, this “convert the image to base64 text” process fails as it encodes the pointer instead.

This is a known limitation of Large Media and documented here:

Quoting that page above:

  • 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.

To summarize, if you site’s build process depends on making transformations to these files during the build (including embedding them as base64 encoded text data in the HTML), then it won’t be possible to use Large Media.

Note, you can still use Git LFS, just not Large Media itself (which is a replacement to the default Git LFS service provided by the repositories Git service). To be clear, you can use just “plain” Git LFS and not use Large Media Git LFS service.

To summarize, there are two possible ways forward (either/or):

a) Don’t do any image transformation during the site build.

b) Stop using Large Media.

I’ll leave it to you to decide which is best for you. If you do want to stop using Large Media for this site, our support team can disable it. Before we do that, though, we ask that you please read the support guide below first:

​Please let us know if there are other questions or if you are ready for us to disable Large Media for this site.

Hi Luke,

sorry but this is the same “solution” that I found in all the other threads already. I am quite certain, that I’m not doing any build-time image processing. I set up my page using Create React App. I configured it with REACT_APP_IMAGE_INLINE_SIZE_LIMIT = 0 to explicitly not inline any images. My local build and the build result I download from Netlify don’t have Base64 encoded images.
Could you provide some more information on what kind of “build-time image processing” you suspect I’m doing?
Thanks :slight_smile:

It was only the base64 encoding that I considered to be “build-time image processing”. As you have stated that is no longer happening, you are correct and I agree that you are not going this anymore.

However, it sounds like you do sometimes still see the base64 encoding based on this:

So, I must retract what I said before about not needing an example deploy id. Would you please send me the “Preview deploy” URL isn’t working? Or, if they all work now, please let me know what but still send the “Preview deploy” URL that didn’t work in the past? Ideally, a URL which is actively not working would the most helpful for troubleshooting.

Those preview deploy URLs should contain the deploy id and would look similar to this:

https://55b8340380f49026cf000001--example.netlify.app/

In the example above 55b8340380f49026cf000001 is the deploy id.

Being able to see an example of a non-working page would almost certainly reveal the root cause. I’ve just not seen one myself yet.

Hi, @schadenn. I did get the PM with the deploy ID URL. For that deploys, I don’t see any deployed images using Large Media at all. All images are working and none of them use Large Media.

I do see the following error in the javascript console:

Uncaught (in promise) f: OneSignal: This web push config can only be used on <redacted site URL without deploy ID>. Your current origin is <redacted site URL with deploy id>.
    at Function.checkRestrictedOrigin (https://cdn.onesignal.com/sdks/<redacted>)
    at Function.<anonymous> (https://cdn.onesignal.com/sdks/<redacted>)
    at Generator.next (<anonymous>)
    at r (https://cdn.onesignal.com/sdks/<redacted>)

Note, any text above which starts with “<redacted” indicates a place where I have deleted information which might identify your site or when I was unsure if it was confidential information or not (and when I was not certain I erred on the side of caution).

Is this CDN perhaps where you are storing your images? If so, hopefully the error above helps you to identify why the images don’t work in that deploy.

To be clear, Large Media cannot explain why the images do not work in that deploy because while Large Media is enabled for the site itself, the deploy mentioned doesn’t use Large Media in any way. Yes, the images do not work, but that isn’t being caused by Large Media in that deploy.

If there are other questions, please let us know.