在 React js 中显示 alt 内容而不是图像答案

【问题标题】：Displaying alt content instead of image in React js在 React js 中显示 alt 内容而不是图像
【发布时间】：2021-03-24 18:29:49
【问题描述】：

image not displaying

function ProductScreen(props) {
const product = data.products.find((x) => x._id === props.match.params.id)
 
<div className="col-2">
                <img className="large" src={product.image} alt={product.name}/>
            </div>

我正在尝试渲染特定 id 的图像，但只显示 alt 属性。任何人都可以帮助我。谢谢你

【问题讨论】：

只要控制台产品，检查img键是否有值。建议：最佳做法是提供后备方案

标签： javascript reactjs image e-commerce

【解决方案1】：

您可能需要使用 require()...以便 react 处理它。

<img className="large" src={require(product.image)} alt={product.name}/>

另一种方法是将图像导入变量并在您的 {src} 中引用它。快速搜索会产生很多结果 -

以下来自https://stackoverflow.com/a/32613874/5867572

  const imgSrc= './image1.jpg';
  return <img src={imgSrc} />

以下来自https://stackoverflow.com/a/35454832/5867572

  import LogoImg from 'YOUR_PATH/logo.png';
  <img src={LogoImg}/>

【讨论】：

说错误：找不到模块'./imagePath'
非常感谢您的回复，但没有解决问题
抱歉 - 一个想法 - 你确定你的图像的相对路径是正确的 - 它需要将 img src 指向正确的目录。
是的，这是正确的，因为在主页中所有图像都正确呈现，但是当我点击特定产品图像 alt 属性时正在呈现

【解决方案2】：

控制台记录产品并查看您的图片网址是否正常，您会更清楚为什么它没有显示

const product = data.products.find((x) => x._id === props.match.params.id)
console.log(product);

【讨论】：

确定在这里
好的，你能再做一件事吗？只需检查图像并查看图像的完整 url。然后复制网址并将其粘贴到新窗口中。它有效吗？如果不是，那么可能是“./”是问题所在。图片名称“images/p1.jpeg”可能会解决问题，而不是“./images/p1.jpeg”
您能否将答案标记为已解决！谢谢。 :)