New to netlify errors loading a images in a react project, don’t know how to resolve properly or troubleshoot

Support
,
1

i’m new to netlify and deploying web applications so i’m sorry if this is an easy question, but i can’t seem to find any proper way to resolve this and because i know how to diognose these things yet i’m unsure where to even start.

when I load the site, I get a bunch of 404 errors for my assets. However, the assets are all present and updated in the project’s GitHub repository, and the site works fine on localhost. I’m not sure what the issue is, but I suspect it maybe has something to do with the file paths?

i have built my site using ./src/… which i saw might be an issue, but after trying to remove those on some of the images they still haven’t loaded. so then i tried linking directly, however the only images to actually load directly are ones hosted remotely.

i’ve also tried asking chat gpt, and changing the source live to a remote image. gpt wasn’t much help, and changing the source to a remote image did work, however i would muhc rather be able to link internally over externally.

an example of what i’ve tried is changing:

<div id="logo">
        <img
          src="./src/assets/mediaKits/reineYurkowskiAssets/initialsThicc.svg"
          alt="Reine Yurkowski's signature"
          style={{ transform: "scaleX(1.5) skew(10deg, 10deg)" }}
        />
</div>

<div id="logo">
        <img
          src="/src/assets/mediaKits/reineYurkowskiAssets/initialsThicc.svg"
          alt="Reine Yurkowski's signature"
          style={{ transform: "scaleX(1.5) skew(10deg, 10deg)" }}
        />
</div>

the difference being the “.” before “/src/…” for the img property “src”

Any suggestions on how to resolve this issue would be greatly appreciated.

the project is hosted @: https://rydesigns-dev.netlify.app/ the github is hosted @: GitHub - reineyurkowski/rydesigns.ca: source code for ryDesigns.ca

and lastly, an example of the errors i’m getting on build are:

GEThttps://rydesigns-dev.netlify.app/src/assets/roundedSquare.svg[HTTP/2 404 Not Found 30ms]
2

The issue is that the assets directory inside src isn’t copied to dist during build. You can see this for yourself by running npm run build or yarn build on your local machine (remove the dist directory first if it exists.)

As you are not importing the image assets into your scripts (e.g. src/main.tsx) Vite doesn’t know you need those assets.

As mentioned in the Vite Static Asset Handling documentation, placing the assets directory into the public directory will result in it being copied during build. Again, you can see this by running npm run build or yarn build on your local machine.

You will need to remove the /src or ./src from the image references inside the .tsx files e.g.

<div id="logo">
        <img
          src="/assets/mediaKits/reineYurkowskiAssets/initialsThicc.svg"
          alt="Reine Yurkowski's signature"
          style={{ transform: "scaleX(1.5) skew(10deg, 10deg)" }}
        />
</div>
1 Like
3

i found the solution thanks to a breadcrumb left at: New to netlify errors loading a images in a react project, don’t know how to resolve properly or troubleshoot

what i found to be the best solution was to make a filed named something like assets.tsx (or whatever file system you’re using), and then to import the assets into in a structure like:

import desiredNameOfAsset from './link/to/asset'

const assets = {
  desiredNameOfAsset
}

export default assets;

then in whatever files need to call said assets, near the top of the page:

import assets from './link/to/assets.tsx'

and later, just call the assets like:

<img [...]
  src={assets.desiredNameOfAsset}
[...] />

then on build, it takes care of all the details needed.

hope this helps anyone who may need it!

1 Like
4

Hiya glad you found your solution!

1 Like