如何修复图像导入时的生产 404 错误

Question

I have a few images on a site that doesn't get loaded. I'm using Vercel and Vite's production preview and both give me this error when importing images:

Failed to load resource: the server responded with a status of 404 ()

And, when I reload the page with the browser console open:

GET https://nicole-tongu.vercel.app/src/assets/images/nicole_pic.jpeg 404

Here's how I have been importing them:

<div className="ms-3 home-image-container">
    <img
       src="/src/assets/images/nicole_pic.jpeg"
       className="home-image"
     ></img>
</div>

When running the code locally, all images' imports work, but I don't know how to make them appear on production.

You can see all my code on GitHub and the app can be found on Vercel

Answer 1

I fixed it in and I sent out a pull request to your github. you can visit the result here

details:

I pull your repository, and run npm run dev ... it works well. image loaded. but when I build your app( npm run build ) and run npm run preview to show the built version of your app, it doesn't work(the image doesn't show in browser like vercel). why? because there was no image in dist directory.

to load images in vite build version, you should have imported them in the header of your home.jsx like this:

import CallButton from '../components/CallButton'
import '../assets/styles/home.css'

// add this one in your header
import NicoleImage from '../assets/images/nicole_pic.jpeg'

function Home() {
  return (
    <section
      id="home"
      className="bg-primary text-dark p-5 d-flex caixa-responsiva align-items-center"
    >
.
.
.
//rest of your code
.
.
.

and after that, you should inject NicoleImage variable to your src attribute of your <img tag, like this:

          <img
            src={NicoleImage}
            className="home-image"
          />

to sure that it works, run npm run build and see that image file is exist in dist directory, and for seeing the result, run npm run preview command to sure it works on the production

after these steps, you can deploy it on vercel

good luck