가져오지 않고 JSX를 사용하여 반응에서 이미지 표시

가져오지 않고 JSX를 사용하여 반응에서 이미지 표시

제가 직면한 문제는img태그. 단일 이미지에 관련된 경우 아래 코드가 이미지를 로드합니다.

import image1 from './images/image1.jpg';
<img src={image1} />

그러나 다음 코드가 로드되지 않습니다.

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

Json을 통해 루프를 만들어야 합니다.

[{'img':'./images/image1.jpg','name':'AAA'}, {'img':'./images/image2.jpg','name':'BBB'}]

또, 각각을, 이름이 바닥글인 이미지로 표시합니다.루핑은 정상이지만 이미지가 로드되지 않습니다.추가할 이미지를 모두 Import 할 수는 없습니다.지금은 JSX 이외에는 사용하지 않습니다.부탁드려요.

다음과 같은 파일이 필요합니다.

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

수입 명세서 대신 require를 사용할 수 있습니다.맘에 들다,

<img src={require("folder/image.format")} alt="image not found" />

그러나 실행 시 이미지를 찾을 수 없습니다!!!

.default를 추가하여 스테이트먼트를 변경하는 것으로 해결할 수 있습니다.

let image = require("folder/image.format");

<img src={image.default} alt="image not found" />

require스태틱한 「스태틱」에 사용되기 때문에, 그 「스태틱」을 변경하기만 하면 됩니다.imports.

예:

var imageName = require('./images/image1.jpg')
<img src={imageName} />

이거 방금 해봤는데, 작동해요!

import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>

getWeatherIconImage(icon) {
  switch (icon) {
    case '01d': return I01d; ...
    default: break;
  }
}

권장되는 답변은 더 이상 작동하지 않는 것 같습니다.다음은 이 문제를 강조하는 코드 조각입니다.

import React from 'react';
import importImg from '../images/img.jpg';
export default function ImgTest(){
return(<>
<img src={importImg} alt='import'></img><br/>
<img src={require('../images/img.jpg')} alt='require function fails'></img><br/>
</>)
}

이 코드가 렌더링되면 다음과 같은 상황이 발생합니다.

첫 번째 이미지 표시 - 예상된 결과

두 번째에는 alt "function failures"가 표시됩니다.예상했던 결과가 아닙니다.

이미지 폴더를 src 폴더에 넣었기 때문입니다.따라서 가져오거나 요구해야 합니다.이와 같이 요구 사항을 가져오거나 사용하지 않고 공용 폴더에 있는 이미지 소스를 직접 넣을 수 있습니다.

<img src=syslog/image1.jpg' />

언급URL : https://stackoverflow.com/questions/42580130/display-images-in-react-using-jsx-without-import