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

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

或

<img src="abc.png" />

没有必要使用require。

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

import abc from "./abc.jpeg";

<img src={abc} />

或

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