Javascript:错误:找不到模块 '../data/icons/table.png'

Question

我试图将图像的路径传递给 react 中的子组件，然后将该路径作为子组件中的源属性提供。当我在 child 中硬编码路径时它有效，但当我使用模板文字时它不起作用。 下面是代码片段。我无法理解为什么模板文字不起作用

import React, {Component} from 'react';


class MenuItem extends Component{

render(){
    // the below 2 lines print exactly the same thing, i.e., string ../data/icons/table.png
    console.log(typeof `${this.props.icon}`, `${this.props.icon}`);
    console.log(typeof "../data/icons/table.png", "../data/icons/table.png");
    return (
    <div className = "sidemenu menu-item">
        <img src={require("../data/icons/table.png")} />   //this works
        <img src={require(`${this.props.icon}`)} />        //Error: Cannot find module '../data/icons/table.png'.
        {this.props.name}
    </div>
    )
}}

Answer 1

如果您以与 API 模块相同的方式使用 bundler (如 webpack 或 yarn)，则可以像模块一样加载图像。

import React, {Component} from 'react';
import table from './data/icons/table.png';

class MenuItem extends Component{

render(){
    return (
    <div className = "sidemenu menu-item">
        <img src={table} />     
    </div>
    )
}
}