webpack을 통한 처리 후 이미지가 표시되지 않음

Question

React 응용 프로그램에서 이미지 번들을 사용하기 시작했으나 브라우저에 표시되지 않습니다 (<img/> 태그가 있지만 이미지가 없음). "webpack"을 실행하면 이미지가 공용 폴더에 해시 이름으로 표시되고 "webpack-dev-server"를 실행하면 이미지가 번들로 표시되지만 브라우저에는 아무것도 표시되지 않습니다. 이 내 웹팩 구성 파일입니다

module.exports = (env) => { 
const isProduction = env === 'production'; 
const CSSExtract = new ExtractTextPlugin('styles.css'); 

return { 
    entry: ['babel-polyfill', './src/app.js'], 
    output: { 
     path: path.resolve(__dirname, './public/scripts'), 
     filename: 'bundle.js' 
    }, 
    module: { 
      rules: [{ 
       loader: 'babel-loader', 
       test: /\.js$/, 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.(png|jp(e*)g|svg)$/, 
       use: [{ 
        loader: 'url-loader', 
        options: { 
         limit: 8000, // Convert images < 8kb to base64 strings 
         name: 'images/[hash]-[name].[ext]' 
        } 
       }] 
      }, 
      { 
      test: /\.s?css$/, 
      use: CSSExtract.extract({ 
       use : [ 
        { 
         loader : 'css-loader', 
         options : { 
          sourceMap : true // source map for css in development 
         } 
        }, 
        { 
         loader : 'sass-loader', 
         options : { 
          sourceMap : true 
         } 
        }, 
        { 
         loader: "jshint-loader" 
        } 
       ] 
      }) 

     }, 
     ] 
    }, 
    plugins : [ 
     CSSExtract, 
    ], 
    devtool: isProduction ? 'source-map' : 'cheap-eval-source-map', // source map for locating a bug in source files, not in the bundle 
    devServer: { 
     contentBase: path.join(__dirname, "public"), 
     publicPath: "/scripts/", 
     historyApiFallback: true // this line is for client-side routing 
    }, 
} 

}

이 내가 내 응용 프로그램에 이미지를 추가하는 방법입니다 :

import img1 from '../../assets/img/ticket.jpg'; 

이 내가 render() 방법에서 사용하는 방법입니다.

<img src={img1}/> 

나는이 브라우저 DevTools로에서 볼 수 있지만 이미지 자체는 표시되지 않습니다 :

<img src="images/9011429377e91d003e5b64251ac3b9a8-ticket.jpg"> 

어떻게 그것을 수정하고 이미지를 표시 할 수 있습니까?

Answer 1

안녕하세요. 이것이 도움이되는지 잘 모르겠습니다. 이미지를 가져올 때 나는 조금 다른 것을하고 생성 된 숫자를 사용하는 대신 이미지의 이름을 사용합니다.

넣어주는 스크립트입니다.

import '../../assets/img/ticket.jpg'; 

그런 다음 렌더링 방법을 지정했습니다. 당신의 대답을

{ 
    test: /\.(png|jpg|gif|json|xml|ico|svg)$/, 
    use: [ 
     { 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]', 
      outputPath: 'assets/', 
      publicPath: '/' 
     } 
     } 
    ] 
    }