Question

我目前正在尝试根据JSON数据给定的路径加载本地图像。数据作为道具传递到我的组件中。由于该组件是根据JSON数据动态创建的，因此无法导入图像。所以我试图“要求”他们，但是我收到一条错误消息，

“错误：找不到模块'./asset/.jpg'”

如果我手动导入图像，图像加载就很好，所以我相信路径格式正确。

为什么会出现错误？我该如何解决？

import React from "react";
import ReactDOM from "react-dom";

function Cell (props){

    return (
    <tr>
        <th>1</th>
        <th><img src= {require(props.image)} /></th>
        <th><div className = "name">{props.name}</div></th>
        <th>
            <a className = "upVote">?</a>
            <a className = "downVote">?</a>
        </th>
        <th className = "count">{props.count}</th>
    </tr>
    );
}

export default Cell;

Answer 1

如果图像位于public文件夹中，则可以直接写：

<img src={props.image} />

OR

<img src="abc.png" />

无需使用require。

如果图像和组件位于同一目录中，也可以像这样导入图像：

import abc from "./abc.jpeg";

<img src={abc} />

OR

<img src={require("./abc.jpeg")} />

动态导入图像时出现错误：“错误：找不到模块'./asset/<imageName>.jpg'”

1 个答案: