ReactJS 및 공용 폴더의 이미지

나는 ReactJS에 새로 왔으며 구성 요소에서 이미지를 가져오고 싶습니다. 이 이미지는 공용 폴더 내에 있으며 반응 구성 요소에서 폴더에 액세스하는 방법을 모릅니다.

어떤 아이디어?

편집하다

Bottom.js 또는 Header.js 내에서 이미지를 가져오고 싶습니다.

구조 폴더는 다음과 같습니다.

웹팩을 사용하지 않습니다. 내가해야합니까 ?

편집 2

이미지와 나머지 자산을로드하는 데 웹팩을 사용하고 싶습니다. 따라서 내 구성 폴더에 다음 파일이 있습니다.

이미지 경로를 추가해야하는 위치와 방법은 무엇입니까?

감사

공개적으로 이미지를 참조하는 방법에는 두 가지 방법이 있습니다. 하나는 Homam Bahrani의 위와 같습니다.

사용

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

그리고 이것이 작동하기 때문에 당신은 정말로 다른 것이 필요하지 않지만 이것도 작동합니다 ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

이를 위해 웹팩 구성이 필요하지 않습니다 ..

구성 요소에서 이미지 경로를 제공하십시오. 기본적으로 react는 공개 디렉토리에서 알 수 있습니다.

<img src="/image.jpg" alt="image" />

반응 문서는 문서에서 이것을 잘 설명 process.env.PUBLIC_URL하고 있으며 공용 폴더에있는 이미지와 함께 사용해야 합니다. 자세한 정보는 여기 를 참조 하십시오.

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

1- 구성에 webpack을 사용하는 것이 좋지만 이미지 경로를 사용하면 반응이 공개 디렉토리에 있음을 알 수 있습니다.

<img src="/image.jpg">

2- React에서 표준 관행 인 webpack을 사용하려는 경우. webpack.config.dev.js 파일에서 이러한 규칙을 사용할 수 있습니다.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

그런 다음 반응 구성 요소에서 이미지 파일을 가져 와서 사용할 수 있습니다.

import image from '../../public/images/logofooter.png'

<img src={image}/>

React가 SPA라는 것을 알고 있습니다. JSX에서 적절한 HTML로 확장하여 루트 구성 요소에서 모든 것이 렌더링됩니다.

따라서 이미지를 사용하려는 위치는 중요하지 않습니다. 가장 좋은 방법은 절대 경로를 사용하는 것입니다 (공용 참조). 상대 경로에 대해 걱정하지 마십시오.

귀하의 경우 이것은 모든 곳에서 작동합니다.

"./images/logofooter.png"

여기에서 웹팩을 사용하여 생활을 편하게해야합니다. 구성에 아래 규칙을 추가하십시오.

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

그런 다음 이미지를 반응 구성 요소로 간단히 가져올 수 있습니다.

import myImage from 'publicfolder/images/Image1.png'

아래와 같이 myImage를 사용하십시오.

<div><img src={myImage}/></div>

또는 이미지를 구성 요소의 로컬 상태로 가져 오는 경우

<div><img src={this.state.myImage}/></div> 

이것을 사용할 수도 있습니다 .. 'yourimage.jpg'가 공용 폴더에 있다고 가정하면 작동합니다.

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