在 ReactJS 中显示来自 url 的图像答案

【问题标题】：Display an image from url in ReactJS在 ReactJS 中显示来自 url 的图像
【发布时间】：2018-12-13 12:18:21
【问题描述】：

我想在 React 中显示来自 URL 的图像。比如我想要这张图片

https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350

显示在 Card body 或 reactJS 中。是否可以这样做，或者我必须先将其下载到资产中才能显示它？又该怎么做呢？

【问题讨论】：

标签： javascript reactjs image

【解决方案1】：

是的。有可能的。只需使用<img /> 标签。

&lt;img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&amp;cs=tinysrgb&amp;h=350"&gt;

【讨论】：

【解决方案2】：

就像在 HTML 中所做的那样

 import React from "react";
 import ReactDOM from "react-dom";

 function App() {
   return (
     <img 
      src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
      alt="new"
      />
   );
 }

 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);

【讨论】：

使用此代码我收到以下错误：Error: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
@SamuelRosenstein 尝试codeSanbox 重现该问题。

【解决方案3】：

您可以使用标签来显示图像。如果图像源处于道具/状态，请使用<img src={this.props.url}/>

【讨论】：

【解决方案4】：

在 App.js 文件中，编写如下代码：

import React from 'react';

function App() {

  return(
    <div>
      <img src="image-url" alt="image" />
    </div>
  );
}

export default App;

【讨论】：

这个答案和接受的答案有什么不同？
接受的答案显示错误（错误：img 是一个 void 元素标签，不能有子元素），可以通过返回 div 容器内的所有内容来解决。将所有东西都作为一个实体返回也是一种好习惯。

【解决方案5】：

解决这个问题；

本地图片：

使用导入语句 无需污染公用文件夹

import slideImg1 from '../../assets/pexels-pixabay-259915.jpg';

然后像这样在Jsx中使用

    const solveLocalImg = () => (
<img src={slideImg1}/>

//or

<div data-src={slideImg1}>
      </div>
)

对于在线图片

使用数组

let imgs = [
  'https://res.cloudinary.com/stealthman22/image/upload/v1586308024/new-portfolio/hero/time-lapse-photography-of-waterfalls-during-sunset-210186.jpg',
  'https://res.cloudinary.com/stealthman22/image/upload/v1586308023/new-portfolio/hero/two-cargo-ships-sailing-near-city-2144905.jpg',
];

 const solveOnlineImg = () => (
<div>
<img src={imgs[0]}/>
<img src={imgs[1]}/>
</div>
)

第二种方法可以使用任意数量的图像。它甚至可以让您轻松管理图像。希望很快我们能找到一个解决方案，让我们按照我们习惯的方式使用 HTML CSS 和 js

目前，我们被令人惊叹的 Webpack 所困

【讨论】：