,javascript,reactjs,webpack"/>
时间戳

首页 > 解决方案 > 动态导入图像时出错：“错误：找不到模块'./asset/.jpg'"

javascript - 动态导入图像时出错：“错误：找不到模块'./asset/.jpg'"

问题描述

我目前正在尝试根据 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;

标签： javascriptreactjswebpack

解决方案

如果您的图像在public文件夹中，那么您可以直接编写：

<img src={props.image} />

或者

<img src="abc.png" />

没有必要使用require它。

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

import abc from "./abc.jpeg";

<img src={abc} />

或者

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

推荐阅读