不需要在 CRA 中加载图像

Posted 2023-02-24

【中文标题】不需要在 CRA 中加载图像

【英文标题】：Requires not loading images in CRA

【发布时间】：2021-04-10 19:21:15

【问题描述】：

嗨

我目前正在尝试在 react 中显示列表的元素，但我无法使用 require 加载图像。 我正在使用 CRA 并且没有更改 webpack.config.js。

列表

import img1 from "../../assets/work-in-progress.png";

const projects = [
    
        id: 1,
        image_path: img1,
        title: "t1",
        category: "testing"
    ,
    
        id: 2,
        image_path: require("../../assets/work-in-progress.png"),
        title: "t2",
        category: "testing"
    ,
]

我如何显示图像

<img src= entry.image_path   className="rounded" />

目前，第一张图片显示正确，但第二张图片未加载。

我已经尝试过使用src= "" + entry.image_path 并得到相同的结果。

【问题讨论】：

image_path: img1 这应该可以。请确保您已将图片上传到公共文件夹中。

是的，这行得通。问题出在数组的第二个元素中，图像没有使用“require”加载，而是使用 import 语句加载。

【参考方案1】：

我认为你的路径不正确。它对我有用。这是工作的code

【讨论】：

是的，这也适用于我，问题出在数组的第二个元素上。

我已经编辑了您的沙箱以添加我在本地编写的第二个元素，您可以看到 here 并且奇怪的是它起作用了。我想问题出在某些本地配置中？我正在使用 CRA