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
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.
Now I somehow can’t roll back to a working build anymore
Hope you can help
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.
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:
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.
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?
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:
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.
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.