I keep getting 404 errors on some of my media and I don't understand why

Please help,

I’ve deployed a site for individual learning but most of the .mp4 files are returning 404 errors. I’ve checked my repository and the files are there. They are also showing up just fine on my local machine.

Here’s a link to my site: https://lobe-copy-jt.netlify.app/examples

There error reads: HTTP load failed with status 404. Load of media resource https://lobe-copy-jt.netlify.app/src/assets/videos/Plants.mp4 failed.

Please let me know if you require any additional information.

@JaysonThompson Only files that are in your Publish directory are deployed by Netlify.

Looking at your deployed site, the file paths specified in the HTML are reaching up and into a /src/ directory that has almost certainly not been deployed.

The reason that it works on your local machine is because the files are accessible there.

Ensure that files you want deployed are in the Publish directory at the point of deployment and that your paths reference them appropriately.

@nathanmartin , Thank you. But just about everything is in that src directory. For example all my components for rendering is in there. Even the tour video in the tour page is in there and that works fine.

@JaysonThompson No it isn’t.

It’s not about where a file starts on your file system, it’s about where it ends up after your build, and what you tell Netlify to deploy.

Interesting. It works for me fine.

Can you provide some documentation on how to fix this issue?

Thank you in advance. :slight_smile:

@JaysonThompson That particular video works fine for me too, but that’s because it has an entirely different file path and the file exists.

The point is that you aren’t comparing “apples & apples”, you’re comparing “apples & oranges”, the file paths are completely different between the video that works and the video that doesn’t.


So from a basic website/hosting/html perspective, the ultimate issue is that those files aren’t where the src path is specified to look for them. I cannot provide you any more documentation related to that other than what I’ve provided, and note that I don’t work for Netlify.

Why it’s occurring will be related to how you have your own build configured.

What documentation you should look at there would depend on the system you’re using (something that you haven’t mentioned).

The fact that the TourVideo has a hash on the end of the filename indicates it has been processed by something, and you’ll note the other file doesn’t have that. I’d just look at what’s different about where you have the two files placed, how you’re referencing them in your templates. Once you spot the difference it will likely shine a light on why one works and the other does not.

@nathanmartin Huge thanks! With your guidance, I was able to figure out how to solve the problem. You were right that the dist file was missing the media.

To those experiencing the same issue, I learned it was because I was statically linking to those videos from a .js object file into a component. However, the media links were not recognized once the site was compiled.

I fixed this be creating an index.js file within my assets directory and importing each file and then exporting their variables. Then I needed to import them into the data file with the object that the component was mapping through and use the variable names instead of the relative paths. Once I ran the build the media files (along with a sha) were showing up in my dist file.

The touring video and image was working because that component wasn’t mapping through the data file but statically inputting the url link.

I hope this helps others and THANKS AGAIN to @nathanmartin!