Transform images not working, create-react-app

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?

Something else that also seems unclear from the documentation is where the api endpoint comes in… should I be using this link anywhere? https://eightdaysin.tokyo/.netlify/large-media

Appreciate any hints :slight_smile:

ps: the repo is private but I can add you as a collaborator if needed

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.

Hi Will!

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?

git lfs push GitHub --object-id 337b97db0aacb5fbb78b66da903b76064d97b04a28dcaf36cb5f46c8f9dd313e
Uploading LFS objects: 100% (1/1), 6.7 MB | 0 B/s, done

(GitHub is my origin)

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

By the way, I also added these lines to my git config file when I was troubleshooting before — I don’t know if that’s helping or messing things up

[credential "https://eightdaysintokyo.netlify.com/"] helper = netlify

@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”

Those 304 status codes indicate cached responses. Could you check Disable Cache up top on the DevTools Network tab?

@marcus thanks – I have checked disable cache and get the same result.

Yeah. I guessed that would not fix it.

Could you repeat the re-upload step like this and get me the output?

GIT_TRACE=true GIT_CURL_VERBOSE=true git lfs push GitHub --object-id 337b97db0aacb5fbb78b66da903b76064d97b04a28dcaf36cb5f46c8f9dd313e

If you are unsure if that log will yield private info, feel free to PM it to me.

Have PM’d - unsure how private the info is :slight_smile:

Nothing special in the logs.
I’m pretty sure the file got uploaded with the wrong content-type and it is hard to overwrite that one.

I’m going to dig for pointers and let you know once I find a viable fix.

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?

Great! Thank you so much.
yes, unfortunately quite a few photos. I’ve sent you a private message with the list.

Weirdly, the photo you fixed (https://eightdaysin.tokyo/photos/DSCF7529.jpg?nf_resize=fit&w=1920) worked at first, but sometimes still loads the original. Now that I tried again it seems to work again. Maybe just a cache issue.

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?

One other quick question while on the subject, I noticed that the photo resized to, for example 300px high (https://eightdaysin.tokyo/photos/DSCF7529.jpg?nf_resize=fit&h=300) has quite bad compression artifacts, is there any way to set the quality higher?

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:

git config -l