CODEWITHSUNDEEP
javascriptreactjsvite
daniel sas
daniel sas

Reputation: 483

How can I add image dynamically with Vite and React from JSON file?

I have a data JSON file in my assets folder, in a folder called data. The data contains an array with objects on the following structure:

 {
    "id": 10,
    "company": "The Air Filter Company",
    "logo": "../images/the-air-filter-company.svg",
    "new": false,
    "featured": false,
    "position": "Front-end Dev"
  }

The folder structure is: SRC directory:

├───assets
│   ├───data
│   └───images
├───components
│   ├───CardWrapper
│   ├───Header
│   └───Main
└───styles

And the images are in the next folder.

Here are my steps:

  1. Imported the array, and map over the elements, passing over the company object:
   import jobs from '../../assets/data/data.json';

   return (
     <section className={styles.mainWrapper}>
       {
           jobs?.map((item, index) => (
               <CardWrapper key={index} company={item} />
           ))
       }
     </section>
   )
  1. Rendered the component and pass to the company prop logo.
const CardWrapper = ({ company }) => {


    return (
        <figure className={styles.figureJobCard}>
            <img src={company.logo} alt='company svg' width={70} height={70} /> 

....REST OF THE COMPONENT

enter image description here

The issue here is that I don't get any error. I dont get the image rendered, nothing is in my console, in the networking tab I ahve status 304 (Unchanged....)

I use Vite with react.

Upvotes: 0

Views: 667

Answers (1)

Souhail
Souhail

Reputation: 41

the thing is that your data object should be like this :

{
    "id": 10,
    "company": "The Air Filter Company",
    "logo": "images/the-air-filter-company.svg",
    "new": false,
    "featured": false,
    "position": "Front-end Dev"
}

And where you use the logo property you should use it like this. if you are in file : src/components/CardWrapper/index.jsx you should

const CardWrapper = ({ company }) => {
    const pathToAsset = '../../assets/'

    return (
        <figure className={styles.figureJobCard}>
            <img src={`${pathToAsset}${company.logo}`} alt='company svg' width={70} height={70} /> 

....REST OF THE COMPONENT

because you component CardWrapper doesn't know the path the images. You can start by this answer and then once you want to improve your load times think about dynamic imports.

Upvotes: 0

Related Questions