React - importing images

Question

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'
        })
    ]
};

score 0 · Answer 1 · answered Nov 14 '17 at 17:05

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?

Yes, just corrected my code. That doesn't work with require and has to be only a url without a const. — Camila, Nov 14 '17 at 17:19
Have you tried seeing what is being returned when requiring? console.log(require(URL+ "/Global/logo1.png")) This should return a string, otherwise you have a wrong webpack config — albertfdp, Nov 14 '17 at 17:22
It breaks the app. I've added my webpack - can you have a look? Are you sure that i can write inside the require() anything other then URL? — Camila, Nov 14 '17 at 20:02

React - importing images

1 Answers1