Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can't display images on Github Pages Vite + React

I’ve spend hours trying to fix an error, but nothing helped. I’ve transfered my local react project to github pages and everything works except images. They are not loading and give 404 error in the console, at the same time exact same code works perfectly on local server.

I import image from the img folder directly to the jsx file, after I run npm run build I also get the file in dist folder. Vite config file uses the correct name of the repository as its base.

Before that I’ve tried moving ‘assets’ folder to ‘public’ folder and then using src={${import.meta.env.BASE_URL}assets/imgs/tatsumi1-img1.jpg}, but that wasn’t working either.

My repository: https://github.com/nneia/Shutoku-Updates

JSX File where I import image: https://github.com/nneia/Shutoku-Updates/blob/master/src/components/ListContainer/ListContainer.jsx

Image location: https://github.com/nneia/Shutoku-Updates/blob/master/src/assets/imgs/tatsumi1-img1.jpg

Please help!

Tags:

2

Answers


  1. 0

    check your vite.config.js

    it has base path as "/Shutoku-Updates/"

    so, while build and deplpoyement , it will pick bath path from "/Shutoku-Updates/".

    its best practice to give base path as "src" or you need to adjust your path
    in ListContainer.jsx file.

    Login or Signup to reply.
  2. 0

    Update the base URL in your Vite Config:

    export default {
 base: '/Shutoku-Updates/',
}

    Import the image with correct path:

    import tatsumiImg from '../../assests/img/tatsumi1-img1.jpg';

<img src={tatsumiImg} alt='img'/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search