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 中进行设置吗？

这是我的 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 完成的。

这个插件允许你请求一个资源，比如一张图片，它会为它返回一个 url。

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

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

url是资源的内容hash，可以长期缓存。

但是，您还希望资源的路径在运行时生成。如果您使用的是 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？