React - Importieren von Bildern

Question

Ich möchte eine globale Variable oder etwas anderes haben, so dass ich leicht Pfad ändern kann, wenn ich muss. Ich möchte auch einen anderen Weg haben, wenn ich es baue.

Gibt es eine bessere Möglichkeit zu importieren, ohne zu benötigen?

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"); 

Irgendeine Idee? Gibt es eine Möglichkeit im Webpack, dass ich das einrichten kann?

Hier ist mein 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

Das ist etwas durch webpack mit der url-loader Plugin erfolgt.

Mit diesem Plugin können Sie eine Ressource wie ein Bild anfordern, und es wird eine URL dafür zurückgegeben.

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

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

Die URL ist der Inhalts-Hash der Ressource, so dass sie langfristig zwischengespeichert werden kann.

Sie möchten aber auch, dass der Pfad zur Ressource zur Laufzeit generiert wird. Wenn Sie ES6-Module verwenden, können Sie das nicht tun (gut, Sie können diese Syntax verwenden https://webpack.js.org/api/module-methods/#import-), aber aus Ihrem Beispiel scheint es, dass Sie nicht seit Sie require verwenden. wenn Sie richtig die url-loader In diesem Fall konfiguriert haben, so scheint es, Ihr Problem ist mit

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

der Pfad nicht auf .png oder eine Verlängerung endet, die in Ihrem webpack Config definiert wurden. Haben Sie versucht, .jpg hinzuzufügen?