CODEWITHSUNDEEP
javascriptreactjsimagedirectoryvite
JIRACHI
JIRACHI

Reputation: 67

Vite, React, and react-lazy: Relative image paths not working for both development and build phases

I'm working on a React project using Vite as the build tool, and I'm trying to implement lazy loading of images using the react-lazy-load-image-component library. I'm facing issues with relative image paths during both development and build phases.

Here's the structure of my project:

my-project/
|-- public/
|-- src/
|   |-- assets/
|       |-- images/
|           |-- projects/
|               |-- presto_store.jpg
|               |-- presto_store-compressed.jpg
|   |-- components/
|       |-- ProjectSection/
|            |-- ProjectSection.jsx
|            |-- ProjectCard.jsx
|       |-- AboutMeSection.jsx
|-- index.html
|-- package.json
|-- vite.config.js

In the AboutMeSection.jsx file, I import the images and use the imported objects as the src and placeholderSrc props for the LazyLoadImage component, and it works perfectly during both development and build phases:

import ProfilePic from "../assets/images/Img_square1.jpg";
import BlurredProfilePic from "../assets/images/Img_square1-compressed.jpg";

<LazyLoadImage
  className="profile-pic"
  src={ProfilePic}
  alt="Immagine Profilo"
  effect="blur"
  placeholderSrc={BlurredProfilePic}
/>

However, in the ProjectCard.jsx component, I need to use relative image paths as props to keep the component agnostic to the actual image paths:

const ProjectCard = ({
  // ... other props
  imgPath,
  placeholderPath,
}) => {
  // ... other code

  return (
    // ... other code
    <LazyLoadImage
      className="project-img"
      src={imgPath}
      alt={title}
      placeholderSrc={placeholderPath}
      effect="opacity"
    />
    // ... other code
  );
};

export default React.memo(ProjectCard);

When I use the component like this inside ProjectSection.jsx (A section where ProjectCards are create and displayed dynamically), like this:

<ProjectCard
  imgPath="/assets/images/projects/presto_store.jpg"
  placeholderPath="/assets/images/projects/presto_store-compressed.jpg"
  // ... other props
/>

or even:

The images are not displayed both in development and build. If I use paths starting with "src/", it works only in the development environment but not in the build.

I need a solution that allows me to use relative image paths with Vite, React, and the react-lazy-load-image-component library so that the images are displayed correctly in both development and build phases, thanks a lot. PS: When I say not displaying I mean:"http://localhost:5173/assets/images/projects/presto_store.jpg 404 (Not Found)" in development mode.

"devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.2.0"
  }

Also, chat GPT suggested me some weird stuff like importing the path library and doing like so, but it doesn't work. And I can't belive it has to be this hard, im surely missing out something simple:

const resolvedImgPath = path.resolve(import.meta.env.BASE_URL, imgPath);
  const resolvedPlaceholderPath = path.resolve(import.meta.env.BASE_URL, placeholderPath);`

Upvotes: 2

Views: 3938

Answers (1)

DominicSeel
DominicSeel

Reputation: 572

Just put the asset folder into public.

https://vitejs.dev/guide/assets.html#the-public-directory

Upvotes: -1

Related Questions