React는 로컬 이미지를로드하지 않습니다.

작은 반응 앱을 만들고 있는데 로컬 이미지가로드되지 않습니다. placehold.it/200x200로드 와 같은 이미지 . 서버에 문제가있을 수 있다고 생각 했나요?

여기 내 App.js가 있습니다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={"/images/resto.png"} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

index.js :

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';

let history = createHistory();

render(
    <Router history={history} >
        <Route path="/" component={App} >
            <Route path="vzdelani" component="" />
            <Route path="znalosti" component="" />
            <Route path="prace" component="" />
            <Route path="kontakt" component="" />
        </Route>
        <Route path="*" component="" />
    </Router>,
    document.getElementById('app')
);

및 server.js :

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

Webpack을 사용할 때 Webpack에서 require이미지를 처리하기 위해 이미지 가 필요 합니다. 이는 내부 이미지가로드되지 않는 동안 외부 이미지가로드되는 이유를 설명하므로 대신 image-name.png를 각각의 올바른 이미지 이름으로 대체 <img src={"/images/resto.png"} />해야 <img src={require('/images/image-name.png')} />합니다. 그런 식으로 Webpack은 소스 img를 처리하고 교체 할 수 있습니다.

나는 내 앱을 만들기 시작했다. create-react-app으로 만들기 ( "새 앱 만들기"탭 참조). 함께 제공되는 README.md는 다음 예제를 제공합니다.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

이것은 나를 위해 완벽하게 작동했습니다. 여기에 은 해당 README에 대한 마스터 문서에 대한 링크입니다 (발췌).

... JavaScript 모듈에서 바로 파일을 가져올 수 있습니다. 이것은 Webpack에 번들에 해당 파일을 포함하도록 지시합니다. CSS 가져 오기와 달리 파일 가져 오기는 문자열 값을 제공합니다. 이 값은 코드에서 참조 할 수있는 최종 경로입니다 (예 : 이미지의 src 속성 또는 PDF 링크의 href).

서버에 대한 요청 수를 줄이기 위해 10,000 바이트 미만의 이미지를 가져 오면 경로 대신 데이터 URI가 반환됩니다. 이는 다음 파일 확장자에 적용됩니다 : bmp, gif, jpg, jpeg 및 png ...

다른 방법 :

먼저 다음 모듈을 설치하십시오. url-loader,file-loader

npm 사용 : npm install --save-dev url-loader file-loader

다음으로 Webpack 구성에 다음을 추가하십시오.

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
  }

limit: 데이터 URL로 인라인 파일에 대한 바이트 제한

당신은 설치해야 할 두 모듈 : url-loader및file-loader

마지막으로 다음을 수행 할 수 있습니다.

<img src={require('./my-path/images/my-image.png')}/>

여기에서 이러한 로더를 자세히 조사 할 수 있습니다.

URL 로더 : https://www.npmjs.com/package/url-loader

파일 로더 : https://www.npmjs.com/package/file-loader

실제로 의견을 말하고 싶지만 아직 권한이 없습니다. 그렇기 때문에 다음 답변 인 척하는 것은 아니지만 그렇지 않습니다.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {
// Import result is the URL of your image
  return <img src={logo} alt="Logo" />;

나는 그 길을 계속하고 싶습니다. 그림이 있으면 간단하게 삽입 할 수 있습니다. 제 경우에는 약간 더 복잡합니다. 여러 장의 사진을 매핑해야합니다. 지금까지 내가 찾은 유일한 실행 가능한 방법은 다음과 같습니다.

import upperBody from './upperBody.png';
import lowerBody from './lowerBody.png';
import aesthetics from './aesthetics.png';

let obj={upperBody:upperBody, lowerBody:lowerBody, aesthetics:aesthetics, agility:agility, endurance:endurance}

{Object.keys(skills).map((skill) => {
 return ( <img className = 'icon-size' src={obj[skill]}/> 

제 질문은 이러한 이미지를 처리하는 더 간단한 방법이 있는지 여부입니다. 더 일반적인 경우에는 말 그대로 가져와야하는 파일의 수가 엄청날 수 있고 객체의 키도 많을 수 있습니다. (그 코드의 객체는 이름-키로 명확하게 참조됩니다.) 필자의 경우에는 관련 절차가 작동하지 않았습니다. 로더가 설치 중에 이상한 종류의 오류를 생성하고 작동 표시를 표시하지 않았습니다. 요구 자체도 효과가 없습니다.

나는 위의 대답을 향상시키는 다음을 남기고 싶었습니다.

허용되는 답변 외에도 aliasWebpack에서 경로를 지정하여 자신의 삶을 조금 더 쉽게 만들 수 있으므로 현재 파일과 관련하여 이미지가 어디에 있는지 걱정할 필요가 없습니다. 아래 예제를 참조하십시오. :

Webpack 파일 :

module.exports = {
  resolve: {
    modules: ['node_modules'],
    alias: {
      public: path.join(__dirname, './public')
    }
  },
}

사용하다:

<img src={require("public/img/resto.ong")} />

저도 @Hawkeye Parker와 @Kiszuriwalilibori의 답변에 추가하고 싶습니다.

여기 문서 에서 언급했듯이 일반적으로 필요에 따라 이미지를 가져 오는 것이 가장 좋습니다.

그러나 동적으로로드 할 파일이 많이 필요 했기 때문에 아래 문서의 권장 사항으로 인해 이미지를 공용 폴더 ( README에 명시되어 있음 ) 에 넣을 수있었습니다 .

일반적으로 JavaScript에서 스타일 시트, 이미지 및 글꼴을 가져 오는 것이 좋습니다. 공용 폴더는 일반적이지 않은 여러 경우에 대한 해결 방법으로 유용합니다.

• manifest.webmanifest와 같이 빌드 출력에 특정 이름을 가진 파일이 필요합니다.
• 수천 개의 이미지가 있으며 해당 경로를 동적으로 참조해야합니다.
• 번들 코드 외부에 pace.js와 같은 작은 스크립트를 포함하려고합니다.
• 일부 라이브러리는 Webpack과 호환되지 않을 수 있으며 태그로 포함하는 것 외에 다른 옵션이 없습니다.

다른 사람에게 도움이되기를 바랍니다! 이 문제를 해결해야하는 경우 댓글을 남겨주세요.

SSR을 사용하는 프로젝트를 개발 중이며 여기에 몇 가지 답변을 기반으로 솔루션을 공유하고 싶습니다.

내 목표는 인터넷 연결이 오프라인 일 때 표시 할 이미지를 미리로드하는 것입니다. (모범 사례가 아닐 수도 있지만 저에게 효과적이기 때문에 지금은 괜찮습니다) 참고로, 저는이 프로젝트에서도 ReactHooks를 사용합니다.

  useEffect(() => {
    // preload image for offline network
    const ErrorFailedImg = require('../../../../assets/images/error-review-failed.jpg');
    if (typeof window !== 'undefined') {
      new Image().src = ErrorFailedImg;
    }
  }, []);

이미지를 사용하려면 이렇게 씁니다

<img src="/assets/images/error-review-failed.jpg" />

server.js의 코드를-

app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.path
    }));

때로는 이미지 위치 / src 대신 입력 할 수 있습니다.

./assets/images/picture.jpg

대신에

../assets/images/picture.jpg

src={"/images/resto.png"}

이러한 방식으로 src 속성을 사용하면 사이트의 절대 경로 "/images/resto.png"에서 이미지가로드됩니다. 이미지 디렉토리는 사이트의 루트에 있어야합니다. 예 : http://www.example.com/images/resto.png

여기에 저에게 효과적이었습니다. 먼저 문제를 이해합시다. 요구할 인수로 변수를 사용할 수 없습니다. Webpack은 컴파일 타임에 어떤 파일을 묶을 지 알아야합니다.

오류가 발생했을 때 절대 대 상대와 같이 경로 문제와 관련이 있다고 생각했습니다. 그래서 다음과 같이 요구하도록 하드 코딩 된 값을 전달했습니다. <img src = {require ( "../ assets / images / photosnap.svg")} alt = ""/>. 잘 작동했습니다. 하지만 제 경우에는 값이 소품에서 오는 변수입니다. 일부 제안 된대로 문자열 리터럴 변수를 전달하려고했습니다. 그것은 작동하지 않았다. 또한 10 개의 값 모두에 대해 스위치 케이스를 사용하여 로컬 메서드를 정의하려고했습니다 (최상의 솔루션이 아니라는 것을 알고 있었지만 어떻게 든 작동하기를 원했습니다). 그것도 작동하지 않았습니다. 그런 다음 요구 사항에 변수를 전달할 수 없다는 것을 알게되었습니다.

해결 방법으로 data.json 파일의 데이터를 수정하여 내 이미지 이름으로 만 제한했습니다. 이 이미지 이름은 소품에서 문자열 리터럴로 제공됩니다. 다음과 같이 하드 코딩 된 값에 연결했습니다.

import React from "react";

function JobCard(props) {  

  const { logo } = props;
  
  return (
      <div className="jobCards">
          <img src={require(`../assets/images/${logo}`)} alt="" /> 
      </div>
    )
} 
  

로고에 포함 된 실제 값은 data.json 파일에서 가져 오며 photosnap.svg와 같은 일부 이미지 이름을 참조합니다.

반응에서 로컬 이미지를로드하는 가장 좋은 방법은 다음과 같습니다.

예를 들어 모든 이미지 (또는 비디오, 글꼴과 같은 자산)를 아래와 같이 공용 폴더에 보관합니다.

간단히 쓰기 <img src='/assets/images/Call.svg' />반응 구성 요소에서 Call.svg 이미지에 액세스하기 위해 하기 됩니다.

참고 : 자산을 공용 폴더에 보관하면 '/ path_to_image'만 제공하고 이와 같은 경로 순회 '../../'를 사용하지 않아도되므로 프로젝트 어디에서나 액세스 할 수 있습니다.

먼저 이미지를 가져온 다음 사용해야합니다. 그것은 나를 위해 일했습니다.

import image from '../image.png'

const Header = () => {
   return (
     <img src={image} alt='image' />
   )
}