在react中将动态图像导入url时出现问题

Question

我正在做一个react项目，我想从data.tsx文件导入一组图像，这样它就应该设置在"data"映射到的元素的backgroundImage url内。但是，我的图像作为元素的背景图像是不可见的，而且我也没有从编译器那里得到任何类型的错误消息。我的代码如下-

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})`
}];

现在我正在把它作为使用到我的组件中

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>
</>
)
}

我几乎试过每一项工作，但都没有得到任何具体的结果。我的任何方法都不是动态映射Paper元素的背景图像。我尝试过的方法-A.(将图像移动到公用文件夹中，然后将其设置为组件文件sx＝｛｛｝｝属性中的backgroundImage。B.(使用我的背景图像sx＝｛｛backgroundImage:tile.bgImage｝｝C.(通过将我的原始对象数组重构为-

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

然后将背景图像作为

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

我还将我的数据文件重构为这个-

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.

但是，它不起作用，相反

上面提到的方法对我都不起作用。我想设置映射我的"对象数组"的元素的"backgroundImage"，有什么具体的工作吗？遵守建议

Answer 1

如果您在Object中使用此导入图像。这将被视为Image标记((内部的对象。尝试在Image标记上导入图像并进行分配。

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})`
}];

在阵列中执行此操作：

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

最好用id和来自同一页面的访问权限来定义名称。像这个

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

就目前而言，根据我的经验，这是工作。

还有一件事，你可以在这里添加图片URL链接，也可以。

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

但毫无疑问，如果我有其他选择，我会分享的。