How to serve static Image path in img tag with webpack in React JS application

Question

I am working on a React application where in I am having img tag with hard coded image path like below in render function

import '../css/styles.scss';
import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import { List } from './list';

class App extends React.Component {

constructor(props) {
    super(props);
}


render() {
        return (
            <div className="container">
               < img src="images/logo.png" alt=""/> 
         );
    }
}

const root = document.getElementById('app-container');

ReactDom.render(<App />, root);

When I run application with webpack-dev-server, application runs fine and I can see image o webpage. However when i run application using webpack command, it generates build folder and and when I run application; I can't see image in webpage. my webpack.config.js is :

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    resolve(__dirname, 'src', 'js/app.js'),
  ],
  output: {
    filename: '[name].[hash].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader?sourceMap&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'sass-loader?sourceMap'
        ]
      }
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'src', 'index.html')
    })
  ]
}

I understand we can use file-loader in webpack to generate image folder in build folder and use import image from "__path to image" However is there any way to serve direct image path mention in render function above ? Thanks in advance

genestd · Accepted Answer · 2017-06-13 06:50:32Z

1

One solution is to use CopyWebpackPlugin. This will copy your images from your src folder to build folder. Then your app can resolve the relative urls.

var CopyWebpackPlugin = require('copy-webpack-plugin');
....
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/images', to: 'images' },
    ]),
  ]

edited Jun 13, 2017 at 6:50

answered Jun 13, 2017 at 6:44

genestd

4044 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sweety · Accepted Answer · 2017-06-13 08:28:46Z

0

one solution is you have to install url-loader.This is command npm install --save-dev url-loader

then add following code in webpack.config file in your rules section.

{
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=25000'
    },

next import your image in your APP component.

import logo from 'images/logo.png';

and pass logo in img tag.Like this

< img src={logo} alt=""/>

import '../css/styles.scss';
import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import { List } from './list';
import logo from 'images/logo.png';

class App extends React.Component {

constructor(props) {
    super(props);
}


render() {
        return (
            <div className="container">
               < img src={logo} alt=""/> 
         );
    }
}

const root = document.getElementById('app-container');

ReactDom.render(<App />, root);

answered Jun 13, 2017 at 8:28

Sweety

7402 gold badges9 silver badges19 bronze badges

1 Comment

user1608841 Over a year ago

thanks, I already said this is one option, but i guess we need file-loader not url-loader ?

Collectives™ on Stack Overflow

How to serve static Image path in img tag with webpack in React JS application

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related