Question

我试图在react中将图像的路径传递给子组件，然后将该路径作为子组件中的source属性提供。当我在子路径中对路径进行硬编码时，它可以工作，但是当我使用模板文字时，它就不起作用。下面是代码片段。我不明白为什么模板文字不起作用

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

如果使用捆绑器（例如webpack或yarn），则可以像API模块一样加载图像（如模块）。

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

Javascript：错误：找不到模块“ ../data/icons/table.png”

1 个答案: