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

问题描述

我有一个 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 响应，但图像仍然没有显示，无论是在我的页面中还是在我在新选项卡中打开图像时。真的不知道从这里去哪里。

标签： javascripthtmlreactjsjsx

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

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

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

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

问题描述

解决方案

推荐阅读