react js에서 이미지 src를 동적으로 제공하는 방법

react js에서 이미지 src를 동적으로 제공하는 방법

이미지명을 src로 동적으로 지정하려고 합니다.패스와 함께 변수를 사용하여 이미지 이름을 동적으로 설정하고 싶은데 src를 올바르게 설정할 수 없습니다.stackoverflow에 대한 솔루션을 시도했지만 아무 것도 작동하지 않습니다.

이렇게 길을 내려고 했는데

<img src={`../img/${img.code}.jpg`}></img>

<img src={'../img/' + img.code + '.jpg'}></img>

<img src={'../img/{img.code}.jpg'}></img>

이렇게 경로를 지정하면 이미지가 src/img 경로에 저장됩니다.

<img src={require('../img/nokia.jpg')}/>

이미지가 표시됨

이 질문은 전에도 한 적이 있지만 나에게는 효과가 없는 질문입니다.이미지 경로를 설정하려면 어떻게 해야 합니까?

이미지를 필요로 하지 않으면 모든 이미지를 공용 폴더에 넣은 후

<img src={`../img/${img.code}.jpg`}></img>

이 방법은 효과가 있습니다.

require를 계속 사용할 수 있습니다.

<img src={require(`./img/${img.code}.jpg`)}/>

공용 폴더에 이미지를 수동으로 추가하는 것은 권장되지 않습니다.답변은 이쪽에서 보실 수 있습니다.https://stackoverflow.com/a/44158919/1275105

매우 심플한 솔루션:

// 이미지js

const images = [
  { id: 1, src: './assets/image01.jpg', title: 'foo', description: 'bar' },
  { id: 2, src: './assets/image02.jpg', title: 'foo', description: 'bar' },
  { id: 3, src: './assets/image03.jpg', title: 'foo', description: 'bar' },
  { id: 4, src: './assets/image04.jpg', title: 'foo', description: 'bar' },
  { id: 5, src: './assets/image05.jpg', title: 'foo', description: 'bar' },
  ...etc
];
export default images;

그런 다음 다음과 같이 다른 구성 요소에서 가져올 수 있습니다.

// MyComponent.js
import images from './images'

//...snip

{ images.map(({id, src, title, description}) => <img key={id} src={src} title={title} alt={description} />)

동적 요구는 깨끗하지 않은 것 같고 eslint도 만족하지 않습니다(이유 불명).

이미지가 퍼블릭폴더에 보존되어 있는 경우는, 다음의 2개의 어프로치를 사용합니다.

const imgNameWithPath = '/fullImageNameWithPath.jpg'

1. env 사용 <img src={process.env.PUBLIC_URL + imgNameWithPath} />

2. 위치 원점 사용: <img src={window.location.origin + imgNameWithPath} />

여러 이미지의 경로를 데이터베이스에서 가져와 단일 태그로 사용해야 하는 경우 다음 방법을 사용할 수 있습니다.1단계 : 이미지가 공용 폴더에 있는지 확인하십시오.스텝 2 : 패스의 갱신은 src가 아닌 public에서 시작해야 합니다.스텝 3 : 패스가 변수와 같이 사용되는지 확인합니다.이미지 경로가 변수 imgPath에서 사용되는 경우.코드를 var imgPath = '/img/pic.filename' "src={imgPath}"와 같이 사용할 수 있습니다.

이게 도움이 됐으면 좋겠는데..

언급URL : https://stackoverflow.com/questions/54033765/how-to-give-image-src-dynamically-in-react-js