React - 이미지 가져 오기

Question

전역 변수 나 다른 것을 가지고 싶기 때문에 필요한 경우 쉽게 경로를 변경할 수 있습니다. 나는 또한 그것을 구축 할 때 다른 길을 가고 싶습니다.

require를 사용하지 않고 가져 오는 더 좋은 방법이 있습니까?

const URL="./../../img"; 

//withURL doesn't work 
    export const logo1 = require(URL+ "/Global/logo1.png"); 

//this works but too long 
    export const logo2 = require("./../../img/Editorial/logo2.jpg"); 

어떤 아이디어가 있습니까? webpack에 이걸 설정할 수있는 방법이 있나요?

var webpack = require("webpack"); 
var path = require("path"); 

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var HtmlWebpackPlugin = require("html-webpack-plugin"); 

var extractPlugin = new ExtractTextPlugin({ 
    filename: "App.css" 
}); 

module.exports = { 
    entry: './src/js/index.js', 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: 'app.bundle.js', 

    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       use: [ 
        { 
         loader: 'babel-loader', 
         options: { 
          presets: ['react', 'es2015'] 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        use: ['css-loader'] 
       }) 
      }, 
      { 
       test: /\.html$/, 
       use: ['html-loader'] 
      }, 
      { 
       test: /\.(png|jpg|svg)$/, 
       use: [ 
         { 
          loader: 'file-loader', 
          options: { 
           name:'[name].[ext]', 
           outputPath: 'img/' 
          } 
         } 
        ] 
      } 
     ], 
    }, 
    plugins: [ 
     extractPlugin, 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html' 
     }) 
    ] 
}; 

Answer 1

이 뭔가 url-loader 플러그인 웹팩를 통해 이루어집니다 :

여기 내 웹팩입니다.

이 플러그인을 사용하면 이미지와 같은 리소스를 요구할 수 있으며이를위한 URL을 반환합니다.

import imageUrl from './url/image.png'; 

console.log(imageUrl) // "/public/path/0dcbbaa7013869e351f.png" 

url은 리소스의 콘텐츠 해시이므로 장기 캐시 될 수 있습니다.

그러나 런타임시 자원 경로가 생성되기를 원합니다. ES6 모듈을 사용하고 있다면 이것을 할 수 없습니다.이 문법은 https://webpack.js.org/api/module-methods/#import-입니다.하지만 예제에서는 require을 사용한 이후가 아닙니다. 올바르게 url-loader를 구성한 경우이 경우, 문제가

const URL="./../../img"; 
export const logo1 = require(URL+ "/Global/logo1"); 

와 경로가 .png 또는 웹팩 설정에 정의 된 일부 확장에 끝나지 않는 것 같다. .jpg을 추가 했습니까?