React - importing images [duplicate] - reactjs

Question

This question already has answers here:
Load images based on dynamic path in ReactJs
(4 answers)
Closed 5 years ago.
I want to have a global variable or something else so that i can easily change path if i need to. I would also like to have a different path when when i build it.
Is there a better way to import without using 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");
Any idea? Is there a way in webpack that i can set this up?
Here is my 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

This is something done through webpack with the url-loader plugin.
This plugin allows you to require a resource, like an image, and it returns a url for it.
import imageUrl from './url/image.png';
console.log(imageUrl) // "/public/path/0dcbbaa7013869e351f.png"
The url is the content hash of the resource, so that it can be long-term cached.
However, you also want that the path to the resource is generated on runtime. If you are using ES6 modules, you can't do that (well, you can using this syntax https://webpack.js.org/api/module-methods/#import-), but from your example, it seems you aren't since you use require. In that case, if you have correctly configured the url-loader, it seems your issue is with
const URL="./../../img";
export const logo1 = require(URL+ "/Global/logo1");
the path does not end on .png or some extension that has been defined in your webpack config. Did you try adding .jpg?