Javascript 在ReactJS中显示url中的图像

我想在React中显示URL中的图像。例如，我想要这个图像

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

---

显示在卡体或卡片中。是否可以这样做，或者我必须先将其下载到资产中，然后才能显示它？怎么做呢？

是的。这是可能的。只需像在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);

从“React”导入React；
从“react dom”导入react dom；
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您可以使用标签来显示图像。如果图像源处于props/state状态，请在App.js文件中使用

，编写以下代码：

import React from 'react';

function App() {

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

export default App;

从“React”导入React；
函数App（）{
返回(
);
}
导出默认应用程序；
来解决这个问题

对于本地图像：

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

在Jsx中的用法如下

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

//or

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


const solveLocalImg=（）=>(
//或
)

用于在线图像

使用数组

让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',
];
常量solveOnlineImg=（）=>(
)

第二种方法可以使用任意多的图像。它甚至可以让您轻松地管理图像。
希望，很快我们就可以找到一个解决方案，使我们能够像过去那样使用HTML CSS和js

目前，我们正在使用令人惊叹的网页包
使用此代码，我收到了以下错误：
错误：img是一个无效元素标记，不能有子元素，也不能使用危险的LysetinerHTML
@SamuelRosenstein尝试重现此问题。此答案和公认答案之间有什么不同？公认答案显示错误（错误：img是一个void元素标记，不能有子元素），可以通过返回div容器中的所有内容来解决。将所有内容作为一个实体返回也是一个很好的做法。
    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>
)