CODEWITHSUNDEEP
reactjs
CopperCleric
CopperCleric

Reputation: 83

my images are not displaying when I run it in react

The code below is my data.jsx file where I used to store images, the title of the images, and description of the images. I have a problem importing images from another folder named Images. The Images folder and data.jsx file are both inside my component file

The vs code compiled it successfully but when I run it I just cannot see the result.

import img1 from './Images/jisoo.png'
import img2 from './Images/blackpink.png'
import img3 from './Images/jennie.jpg'


export const sliderItems = [
 {
    id:1,
    img:{img1},
    title:"CNY SALES",
    desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
    bg:"f5fafd",
},
{
    id:2,
    img:{img2},
    title:"ANY SALES",
    desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
    bg:"fcf1ed",
},
{
    id:3,
    img:{img3},
    title:"BNY SALES",
    desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
    bg:"fbf0f4",
}]

Click on this link and you can the picture of my source code

Upvotes: 0

Views: 55

Answers (1)

Rahul Sharma
Rahul Sharma

Reputation: 10071

When you use { img } outside jsx(html) this will create an js object.

You are doing something like this which is not correct.

{
    id:3,
    img:{img3 : img3},
    title:"BNY SALES",
    desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
    bg:"fbf0f4",
}

Use like this

{
    id:3,
    img:img3,
    title:"BNY SALES",
    desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
    bg:"fbf0f4",
}

Upvotes: 1

Related Questions