Hi! I have a create-react-app running with tailwind css and Netlify, deployed from GitHub. You can see a test page up at https://eightdaysin.tokyo/.
For some reason, and I have searched everywhere for a solution, the transform-image function of Netlify large media doesn’t seem to be working when deployed (or locally for that matter, even when I try with an absolute URL). When I initially set up the prototype, I think I managed to get one transformation to work (not sure how) but now the site only serves the original high resolution image.
I have followed the Netlify large media tuturials very carefully and have definitely tracked the correct folder of images (they are showing in the Netlify large media tab). Currently the image is in /public/photos with the src as "./photos/DSCF7529.jpg?nf_resize=fit&h=300" for testing. I have also tried using an absolute url, putting the photos in the /src/ folder and experimented with requiring the images in various React ways, rather than just a simple <img src="" />
I would really appreciate any pointers as I’ve been trying everything to get this working.
Thanks!
Is there any chance someone might be able to have a look into this one? I’m tearing my hair out trying to solve it… Please let me know if you need more information.
I have tried all kind of different ways of linking to the photos, to no avail. One interesting thing is that attempting to open the image from the inspector in a new tab to test the resizing query on its own results in the image downloading every time. Not sure if this is relevant but I think it might be.
As I said, I can’t see any issues with git LFS, and all photos are showing up correctly in the Netlify app…I did notice on another thread that the solution was linked to multiple installations of git, but I don’t see that as being an issue here given the media has been tracked by lfs, or could it be?
Hi, @willhindson. Welcome to our community site and sorry for the delay in this reply.
I examined the site in detail and … I don’t see anything to explain this issue. All t’s are crossed and i’s are dotted. The files are hosted in Large Media and working as expected from that resource.
I’m going to ask our developers to take a look at this because, all indications are that these files are indeed correctly using Netlify Large Media (NLM) but the image transformations are not working for me either.
It is a beautiful site and I want to help get it working with NLM. We’ll have another update as soon.
I noticed that your pictures get served with a content-type of application/octet-stream instead of the expected image/jpeg. That might keep the transformation engine from working on those assets.
Are you on the latest version of git-lfs? We need at least 2.5.0 for it to work.
If yes, can you try executing the following in your repository?
git config lfs.contenttype true
This tells git-lfs to send a content type when uploading.
You can then try it out on a single image by re-uploading it, like this:
git lfs push origin --object-id <sha>
The easiest way to find that sha should be trough looking at an LFS file through github.
If that works, I can make a script so you can re-upload all of them.
I’m eager to hear if that solved your problem.
If not, I can take a look at the requests from the upload.
Thank you so much for looking into this and for the compliment! I’m also excited to get it up and running on NLM.
I am using git-lfs 2.8.0, so I executed the command you suggested, and found the sha as you indicated through the file reference in github. It appears to have re-uploaded the correct file (I checked the file size and it matches). I’m not sure if I formatted the command correctly, though it seems to have worked – I was supposed to replace <sha> with just the long string, correct?
I tried emptying the cache and hard reloading but still get the same results - it’s serving the original full res image…
This was the full image file in github, by the way: version https://git-lfs.github.com/spec/v1 oid sha256:337b97db0aacb5fbb78b66da903b76064d97b04a28dcaf36cb5f46c8f9dd313e size 6737923
@willhindson, has there been a new deploy since the images we uploaded again?
It looks like the answer is “yes” from the deploy history, but I want to be certain this was done. I’m moving forward based on the assumption it was done and we’ll have another update soon.
@luke I’m only on my phone right now but quickly checking github it looks like I might have tried a slightly different url for the image, I think this was after I pushed that image to LFS as you suggested
Weirdly, on the file-type being “octet-stream” — I’m still getting that after trying git config lfs.contenttype true and re-uploading, but when I reload the page once or twice, this changes to “text/plain”
Great - thanks! Sounds like if there’s no easy fix now that I have to start over and make sure to set git config lfs.contenttype true before committing anything? (hope not!)
I was able to fix the content type for the example photo you gave us.
Resizing works now: https://eightdaysin.tokyo/photos/DSCF7529.jpg?nf_resize=fit&h=300
The problem was that our setup does not allow changing the content-type retroactively via re-upload. I’ll try to get a fix in place for this.
Are there more photos which are already uploaded that I should attempt to fix?
Could you also try adding a new photo so we can check if the content type is correct for those newly uploaded?
Anyway, I also tried to upload a new image just now (haven’t added to the markup) – photos/DSCF7554.jpg
edit: having quickly replaced the url in the inspector, it seems this image is still/also “octet-stream”… could I have done something wrong with the command earlier?
If you have issues with compression artifacts on JPEG you can consider doubling the dimensions of the image. Tests show that the size will be smaller than when increasing compression quality.
But your git-lfs client still seems unable to specify the right Content-Type. That really worries me.
Could you take this image and upload it to your repository? https://nlm-staging-test-site.netlify.com/assets/orange.jpg
I just want to make sure it is not caused by the photos you have.
Can you also show me what your full git config looks like?
Please execute this inside the path of your repository:
