반응에서 url의 이미지를 표시합니다.JS

반응에서 url의 이미지를 표시합니다.JS

리액트에 URL의 이미지를 표시하고 싶다.예를 들어, 나는 이 이미지를 원한다.

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

카드 본문 또는 reactJ에 표시됩니다.표시할 수 있습니까? 아니면 자산에 다운로드해야 표시할 수 있습니까?어떻게 하는 거죠?

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);

이 문제를 해결하려면

로컬 이미지의 경우:

가져오기 문 사용 공용 폴더를 오염시킬 필요 없음

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만으로 익숙한 방식으로 작업을 수행할 수 있는 솔루션을 얻을 수 있기를 바랍니다.

현재 우리는 놀라운 웹팩을 가지고 있다.

태그를 사용하여 이미지를 표시할 수 있습니다.이미지 소스가 소품/상태 사용 중인 경우<img src={this.props.url}/>

네, 가능합니다.그냥 사용하다<img />태그를 붙입니다.

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

App.js 파일에 다음 코드를 기록합니다.

import React from 'react';

function App() {

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

export default App;

언급URL : https://stackoverflow.com/questions/51184136/display-an-image-from-url-in-reactjs