[javascript] React.js의 img에 대한 올바른 경로

Program / 글쓴이

반응 프로젝트의 이미지에 문제가 있습니다. 실제로 나는 항상 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} />