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プラグインでのWebPACKを介して行われます：

は、ここに私のWebPACKのです。

このプラグインを使用すると、イメージのようなリソースを要求することができ、そのリソースの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たりWebPACKのの設定で定義されているいくつかの拡張子に終わらないようです。 .jpgを追加しましたか？