Large media images 404

Using Vue and Webpack.

I’m trying to leverage NLM for hosting of some image assets used in my site, but in my branch to test it out all images return with a 404.

Any image requested returns a JSON response {"code":404,"msg":"File not found"}, however I have a custom 404 page which is returned for any other page/path/image that does not exist

I have followed all the steps listed in here and all looks correct.

√ Checking Git version [2.22.0.windows.1]
√ Checking Git LFS version [2.7.2]
√ Checking Git LFS filters
√ Checking Netlify's Git Credentials version [0.1.8]

I can see in my git repo on the branch that the images are in the expected format.

version https://git-lfs.github.com/spec/v1
oid sha256:9ede68414a0f9557b3b2b3b0f6afc03dd111644c9a84d174460ce95c391ef416
size 2249659

And the oid sha matches up with the sha matches up with the image listed under large media in the site on Netlify.

The images are import using require('@/assets/images/XXX.jpg'), they do however map to a different directory images/XXX.jpg after github, but this is reflected in the location of the image under Large Media for the site

Any help greatly appreciated

Hi, @danjmurphy92. Thanks for this question and welcome to our community forum.

Is this require method occurring on the page itself or is this require part of the build process (which what I’m guessing is being done)?

Large Media assets are not available for local processing during the build process, they are only available once the deploy itself occurs. I’m guess this is the reason if the error occurs during the build itself (if that is what is happening).

If you need to work with the repo images locally during the build itself, Large Media cannot do this and cannot be used in this scenario.

If this is not what is happening or if there are other questions, please reply anytime.

Hey @luke, thanks for the reply. Sorry, I should have been more clear, it looks to be anissue in the deploy not the build. That said I could easily be missing something.

I hope this isn’t against the community rules, but I have linked the latest build and the component in question in the repo. Not sure how authorization works and you can see the build logs, I can post a transcript if not. Thanks again :slight_smile:

Build log

Component in question

I am importing the image on line 30 and using it in my template on line 9

As I said above the path will change after webpack processng, but it seems to have the right path in the large media console

@danjmurphy92, I moved this discussion to a private channel to gather some more troubleshooting data which might contain sensitive information (i.e., login/authentication details).

Would you please reply here if you don’t see an email about this?

Once we resolve the issue, I’ll update this topic with the solution we have found.

As a follow-up, the issue was that .git/hooks/pre-push didn’t contain the LFS code.

This was resolved with git lfs update --force and then git lfs push --all (sometimes git lfs push --all origin is used instead).

2 Likes

hi @luke, I’m running into a very similar issue. I’m using React. I checked that my .git/hooks/pre-push has:

#!/bin/sh
command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.\n"; exit 2; }
git lfs pre-push "$@"

Everything else is the same as the original question, except that I don’t have the images imported in any of my typescript code (not sure if I need to import them? it seems to not be good practice to import things from outside src in React). Images are stored in public/images. I expected to be able to reach the image through <app>/images/<imageName> but I get the same JSON response: {"code":404,"msg":"File not found"}

Any help would be greatly appreciated!

I think I found my issue. My folder structure was a little weird initially:

  • repo
    • README
    • react-site
      • src
        • react files and stuff here
      • public
        • images
          • images here

So when I deployed, I would tell netlify to use react-site as the top level folder to find builds. I tried to access my images using <app>/images/<imageName> and it would fail. Then I changed my repo structure:

  • repo
    • README
    • src
      • react files and stuff here
    • public
      • images
        • images here

And after pushing this change, using <app>/images/<imageName> to retrieve my image finally worked.

I still wonder though, using my initial file structure, should I have tried to use <app>/react-site/images/<imageName> to get my images? I never tried that and I’m curious if that would’ve worked. I went back to this deploy and it was working… so I don’t know what I’m talking about anymore. (I’m guessing Large Media took time to process the image upload??)

Another question, do the images need to be in the public folder? Is it possible to still serve the images through Netlify Large Media if the images aren’t in the public folder? What would be the url path to serve them at in that case?

Hi, @zhjngli. I’m not sure if I reading the edits correctly but it sounds like it is working for you now. Is that correct?

If so, these appear to be the only remaining questions:

Another question, do the images need to be in the public folder? Is it possible to still serve the images through Netlify Large Media if the images aren’t in the public folder? What would be the url path to serve them at in that case?

All files (including those using Large Media) must be deployed via the publish directory (which might be called “public” for your static site generator). Using Large Media doesn’t change this requirement. File must be put in the publish directory and deployed before the files can be requested via HTTP.

If there are other questions, please let us know.

Thanks for the response @luke ! Yea, it’s working for me now. I’m a bit unfamiliar with web dev, so thanks for the answer as well. You helped me realize I needed to bundle my assets using webpack instead of relying on react’s default public folder.

Is there a way to remove previously uploaded Large Media files? A lot of my previous uploads are stale now

Hi, @zhjngli. Large Media is a Git LFS service. If those files exist in the Git history, they will and should continue to exist in the Large Media instance. Git isn’t just about what is now. A Git repo must contain the entire history and all versions of every file. That is just how Git works.Large Media is a Git LFS service so the same requirements apply to it also.

If you somehow remove the files in question from the history of the Git repo (or you make a new Git repo), the workflow would be this:

  1. The existing Large Media instance is deleted which removes the history for it.
  2. You then re-enable Large Media for this site which creates a new Large Media instance with a fresh history.
  3. You run git lfs push --all origin to upload the images that do exist to the new Large Media Git LFS service.

​Please let us know if there are other question or if you want to proceed workflow above.

1 Like

Got it, thanks! For now it’s not a big issue, but I’ll reach out if I want to proceed with that workflow.

1 Like