在 ReactJS 中显示来自 url 的图像

Question

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

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

显示在 Card body 或 reactJS 中。 是否可以这样做，还是必须将其下载到资产才能显示？ 以及怎么做？

Answer 1

正如你在 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);

Answer 2

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

Answer 3

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

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

Answer 4

解决这个问题；

对于本地图像：

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

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

Answer 5

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

import React from 'react';

function App() {

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

export default App;