problem while importing dynamic images to url in react

Question

I am making a react project, where I want to import the set of images from a data.tsx file such that it should set inside the backgroundImage url of the element in which the 'data' is mapped into. But, my images are not visible as the background image of the element, also I am not getting any kind of error message from the compiler instead. My code is as follows -

import start from "../assets/Board/hut.png";
import image2 from "../assets/Board/Man.png";
import image3 from "../assets/Board/Factory.png"

const Tiles = [
    {
        id: 1,
        name: "start",
        bgImage : `url(${start})`
    },
    {
        id: 2,
        name: "two",
        bgImage : `url(${image2})`
    },
    {
        id: 3,
        name: "three",
        bgImage : `url(${image3})`
    }];

and now I am using it into my component as

import Tiles from "../../Data/tileData";

export default function Dashboard(){
return(
<>
<Grid container>
{Tiles.map((tile) => (
<Grid item xs={1} key={tile.id}>
<Paper elevation ={2} sx={{backgroundImage : `url(${tile.bgImage})` }}
</Grid>
))}
</Grid>
</>
)
}

I have tried almost every workAround this, but didn't get any concrete results. None of my method is mapping the background Image of the Paper element dynamically. Methods I tried - A.) By moving the images into the Public Folder and then setting it as the backgroundImage inside my component file's sx ={{}} attribute. B.) By using my backgroundImage as sx={{backgroundImage : tile.bgImage }} C. ) By refactoring my orignal object array as -

const Tiles = [
{
id : 1,
name : "start",
bgImage : "/Board/hut.png" //after adding the Board folder inside Public folder.
}, {...}, {...}}];

and then passing the backgroundImage as

sx={{ backgroundImage : `url(${tile.bgImge})`}}

I have also refactored my data file as this -

    const Tiles = [
        {
            id: 1,
            name: "start",
            bgImage : '/Board/hut.png'
        },
        {
            id: 2,
            name: "two",
            bgImage : '/Board/Man.png'
        },
        {
            id: 3,
            name: "three",
            bgImage : '/Board/Factory.png'
        }];
//note - all the references to the images are now from inside the public folder instead.

but, it doesn't work instead

none of the above mentioned methods worked for me. I want to set the 'backgroundImage' of the element mapping my 'object array' , is there any specific work around this? suggestions are honoured

score 0 · Answer 1 · answered Aug 23 '22 at 05:25

If you are using this import images in Object. That is going to treat as an object inside of Image tag (). try to import images on the Image tag and assign them.

import start from "../assets/Board/hut.png";
import image2 from "../assets/Board/Man.png";
import image3 from "../assets/Board/Factory.png"

const Tiles = [
    {
        id: 1,
        name: "start",
        bgImage : `url(${start})`
    },
    {
        id: 2,
        name: "two",
        bgImage : `url(${image2})`
    },
    {
        id: 3,
        name: "three",
        bgImage : `url(${image3})`
    }];

Do this in array:

{
     id: 1,
     name: "one",
 }

Better to define the name with id. and access from the same page. like this

import hut1 from "../assets/Board/hut.png";
import image2 from "../assets/Board/Man.png";
sx={{ backgroundImage : hut1}}
sx={{ backgroundImage : image2}}

For now, as per my experience, it's work.

One thing more, you can add image URL link in this that works too.

    {
        id: 1,
        name: "start",
        bgImage : 'https://picsum.photos/200'
    }

But Definitely, I will share any other option if I got.

problem while importing dynamic images to url in react

1 Answers1