为什么相对图像路径在我的React应用程序中不起作用？

Question

我有一个React应用，其中我将相对图像URL作为属性传递给组件。

<TechListItem imgSrc="../assets/images/javascript.png" itemName="JavaScript" />

道具被送入src属性...

const TechListItem = (props) => {
return (
    <ListGroup.Item className="listItem">
        <img className="listImage" src={ props.imgSrc } alt={ props.itemName }/>
        <p className="itemName">{ props.itemName }</p>
    </ListGroup.Item>
);
}

我已经使用来自其他来源的绝对路径测试了同一组件的其他实例...

<TechListItem imgSrc="https://via.placeholder.com/75" itemName="React" />

它们工作正常。

我已经检查了页面中的可能图像，并尝试在Chrome中打开图像地址（http://localhost:3000/assets/images/javascript.png），但没有任何显示。当我在“网络”选项卡中查看时，它表示该图像的响应代码为304。在禁用开发人员工具的缓存后，我尝试清空并重新加载。这使我得到200的响应，但是无论是在页面还是在新标签页中打开图像时，图像均未显示。真的不确定从这里去哪里。

Answer 1

这种路径在运行时中不存在，也许您应该尝试以下方法之一：

// import
import ImgSrc from '../assets/images/javascript.png';
<TechListItem imgSrc={ImgSrc}/>

// or require
<TechListItem imgSrc={require('../assets/images/javascript.png')}/>