Large Media -- Assets not showing up on production

answered
#1

I’m trying out Netlify Large Media in a CRA-built React app.

The Git LFS and Netlify LM installs appear to have worked (passed all the above troubleshooting), and seem to be recognized both in my Github branch (files are kept on LFS) and in my Netlify build.

The build logs show Netlify Large Media is enabled, running git commands with GIT_LFS_SKIP_SMUDGE=1 and, in my first deploy with those two enabled, 10 new files to upload.

So it seems that that’s hooked up correctly. But in my React app, on the branch where I have this set up, the images that I tracked with Git LFS just aren’t showing up. (In fact, the image nodes aren’t there at all, which is weird, and may have something to do with my React code, but unsure, so I figured I’d bring it up).

I also tried briefly making that branch my main deploy branch, because I wasn’t sure if it needed to be my main site URL to work, but no dice.

It’s a pretty basic React app, built with CRA. I render images like so:

import MyImage from 'assets/img/my-image.jpg';

... 
  <img src={ MyImage } />

It was my understanding that Netlify would then locate that image correctly by looking at Github LFS, and keep that in a CDN somewhere. But it doesn’t seem to be hooking those images up correctly to my frontend app.

Am I missing something?
Is there somewhere I can go to see the set of images Netlify is hosting for me?

Lastly, and not quite related, is there a predictable URL path that these images will be hosted at? I’d like to store images in my Markdown files there as well, and in that case, it seems like it would be easiest to just enter the path directly. Or is there another way to integrate Netlify Large Media with Markdown?

#2

I’m running into the same issue. I have a static html/css page, and the images are references relative to an images/ directory. For example:

.brand-logo {
  width: 200px;
  height: 60px;
  background-image: url('../images/PrimaryLogo_Color_NoTagline.png');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

<a href="index.html" class="brand-logo"></a>

I see that that netlify is able to pull the images from git LFS when I go to settings > Large Media, but loading the site shows 404s when pulling the images.

UPDATE I was able to fix my issue by removing the images from my git repository, and then adding them back in and committing. I had installed git LFS after already committing the images, and the images on the git repo were still in jpg form instead of the text replacements. You can see if you had the same issue as me by navigating to your images on git and seeing if you see an image or text (should see text)

#3

Importing images in your code like that is usually used at build time, not browse time, @sasha (well, I am not a react expert, but I think this is true from examining a few thousand customer build logs :)).

Are you sure that this code is running in the browser, rather than during build? During build, there are no assets there - just references to them - so I think importing them during build will not import an image to be packaged by CRA. I have only used Gatsby but the advice for importing things there is NOT usable with NLM so I think you may be in the same boat?

#4

@sasha did you end up having luck with this?

@fool I’m having the similar issue to Sasha

  • I have a Jekyll site
  • It’s connected with Forestry with settings from https://forestry.io/docs/media/netlify-large-media/
  • End result is that all images are broken on my site.
  • I should add that when I deploy using netlify deploy all the images show up. And they do again when I run netlify deploy --prod, however, if I push a new post up locally, or from Forestry, all the images are gone again. And if I retry deploying, then all the posts are gone even though they’re in my repo.
#7

@samkap, would you please email us at support@netlify.com? This will open a support case. We can then troubleshoot there and I’ll follow-up here with the resolution.

Does that scenario sound agreeable?

1 Like