반응 프로젝트의 이미지에 문제가 있습니다. 실제로 나는 항상 src 속성에 대한 상대 경로가 파일 아키텍처를 기반으로한다고 생각했습니다.

여기 내 파일 아키텍처 :

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

그러나 경로가 URL에 작성되어 있음을 깨달았습니다. 내 구성 요소 중 하나 (예 : file1.jsx)에 다음이 있습니다.

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

이 문제를 어떻게 해결할 수 있습니까? 반응 라우터가 처리하는 모든 형태의 경로에서 모든 이미지를 동일한 경로로 표시 할 수 있기를 바랍니다.

파일 시스템이 아닌 현재 URL과 관련된 상대 URL을 사용하고 있습니다. 절대 URL을 사용하여이 문제를 해결할 수 있습니다.

<img src ="http://localhost:3000/details/img/myImage.png" />

그러나 www.my-domain.bike 또는 다른 사이트에 배포 할 때는 좋지 않습니다. 사이트의 루트 디렉토리에 상대적인 URL을 사용하는 것이 좋습니다

<img src="/details/img/myImage.png" />

create-react-app이미지의 상대 경로 에서는 작동하지 않는 것 같습니다. 대신 이미지를 가져올 수 있습니다.

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

create-react-app를 사용하여 프로젝트를 만든 경우 공용 폴더에 액세스 할 수 있습니다. 따라서 image공용 폴더 안에 폴더 를 추가해야 합니다.

공개 / 이미지 /

<img src="/images/logo.png" />

로 create-react-app가 공공 폴더 (와 index.html을가 ...). "myImage.png"를 img 하위 폴더 아래에 배치하면 다음을 통해 액세스 할 수 있습니다.

<img src={window.location.origin + '/img/myImage.png'} />

1. src (/ src / images) 안에 이미지 폴더를 만들고 이미지를 보관하십시오. 그런 다음 컴포넌트에서이 이미지를 가져 오십시오 (상대 경로 사용). 아래처럼

   import imageSrc from './images/image-name.jpg';

   그런 다음 구성 요소에서.

   <img title="my-img" src={imageSrc} alt="my-img" />

2. 다른 방법은 이미지를 공용 폴더에 유지하고 상대 경로를 사용하여 이미지를 가져 오는 것입니다. 이를 위해 공용 폴더에 이미지 폴더를 만들고 이미지를 보관하십시오. 그런 다음 구성 요소에서 아래와 같이 사용하십시오.

   <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

   두 가지 방법 모두 작동하지만 첫 번째 방법은 빌드하는 동안 웹 팩으로 더 깔끔한 방식과 이미지를 처리하기 때문에 권장됩니다.

내 경우에는 다음 코드도 작동합니다.

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

일부 오래된 답변은 효과가 없으며 다른 답변은 훌륭하지만 주제를 설명하지는 않습니다.

이미지가 'public'디렉토리에있는 경우

예: \public\charts\a.png

html로 :

<img id="imglogo" src="/charts/logo.svg" />

자바 스크립트에서 :

동적으로 새 이미지로 이미지를 만듭니다.

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

id를 'img1'로 기존 img로 이미지를 동적으로 설정하십시오.

document.getElementById('img1').src = 'charts/a.png';

이미지가 'src'디렉토리에있는 경우 :

예: \src\logo.svg

자바 스크립트에서 :

import logo from './logo.svg';  
img1.src = logo;  

jsx에서 :

<img src={logo} /> 

공식 사용 지침에 따라 webload.config.js에 파일 로더 npm 을 다음과 같이 추가 하십시오 .

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

나를 위해 일했다.

컴포넌트에서 이미지 가져 오기

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

그리고 이미지 src = {RecentProjectImage_3} 의 이미지 이름을 객체로 호출하십시오.

 <Img src={RecentProjectImage_3} alt="" />

친구가 다음과 같이이 작업을 수행하는 방법을 보여주었습니다.

"./"는 이미지를 요청하는 파일 (예 : "example.js")이 "images"폴더와 폴더 트리 구조 내에서 동일한 수준에있을 때 작동합니다.

공용 폴더에 로고를 예를 들어 public / img / logo.png 아래에 둔 다음 공용 폴더를 % PUBLIC_URL %이라고합니다.

<img src="%PUBLIC_URL%/img/logo.png"/>

위의 % PUBLIC_URL % 사용은 public빌드 중에 폴더 의 URL로 대체됩니다 . public폴더 내 파일 만 HTML에서 참조 할 수 있습니다.

"/img/logo.png"또는 "logo.png"와 달리 "% PUBLIC_URL % / img / logo.png"는 클라이언트 측 라우팅 및 루트가 아닌 공개 URL 모두에서 올바르게 작동합니다. 를 실행하여 루트가 아닌 공개 URL을 구성하는 방법에 대해 알아보십시오 npm run build.