在 ReactJS 中显示来自在线 url 的图像时出现损坏的图像图标答案

【问题标题】：Getting broken image icon when displaying image from online url in ReactJS在 ReactJS 中显示来自在线 url 的图像时出现损坏的图像图标
【发布时间】：2021-12-30 17:33:38
【问题描述】：

网页显示正常。 but the images show up like this.

我的代码是 <img src = {props.imageUrl} /> 并且 console.log(prop) 返回

{...imageUrl: "https://unsplash.com/photos/3PeSjpLVtLg"...}

可能是什么问题？谢谢！

【问题讨论】：

标签： javascript html reactjs image frontend

【解决方案1】：

尝试像这样将 require 添加到 src 图像中：

<img src = { require(props.imageUrl)} />

另一种方法是在道具中添加要求：

例子：

 const slides = {
 imageUrl: require('url'),
}

并将您的代码保留在<img src = {props.imageUrl} />中

【讨论】：

【解决方案2】：

网址是网页。它不是图像的 url，因此image 标签将无法显示它。在这个特定图像的情况下，您希望 url 是这样的：

https://images.unsplash.com/photo-1601439678777-b2b3c56fa627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80

【讨论】：