Question

这是我要渲染的组件，正在映射该组件，并放入了必要的道具。这些道具之一是位于本地目录中的图像。当我输入相同的'..images/example.png'时，它将不会出现问题。但是，当此数据被映射到映像目录并作为image属性放入其中时，它表示找不到模块。有什么想法可以解决我的问题或原因吗？

import React, {Component} from 'react';
import {Link} from 'react-router-dom'


class Project extends Component {


    render(){
        let {
            id,
            image
            } 
            = this.props
        return(
                <div className='project-container'>
                    <h1>{id}</h1>
                    <img src={require(image)} />
                    <p>description</p>
                    <p>technologies used</p>
                    <img src={require('../images/git.png')} />
                </div>

        )
    } 
}



export default Project;

Answer 1

您的图像道具不应包含图像路径。但是只是图像的名称。然后，您应该通过类似

的操作来读取图像

<img src={require('../images/'+image)}

确保变量image仅包含实际图像的名称，而不包含路径。

Answer 2

我能想到的两种可能性。

如果您使用create-react-app创建了React应用，那么应该有一个名为public的文件夹。
您需要将所有static资产（图像，视频，mp3）放在那里。
如果您使用webpack从头开始（或从样板开始），则需要将其导入（例如import Git from './img/git.png'）并配置该webpack以处理PNG或其他类型或图像文件。

如何从本地目录加载图像作为一个反应道具？

2 个答案: