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 []
√ 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.

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).