web-dev-qa-db-ja.com

ReactJSでURLから画像を表示する

ReactのURLから画像を表示したい。たとえば、この画像が欲しい

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

カード本体またはreactJSに表示されます。それを行うことは可能ですか、それを表示する前にアセットにダウンロードする必要がありますか？そして、それを行う方法は？

javascriptreactjsimage
11
Last

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);
11
Suman Kundu

タグを使用して画像を表示できます。画像ソースがprops/stateにある場合は、<img src={this.props.url}/>

2
Harikrishnan

はい。可能です。単に<img /> 鬼ごっこ。

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