Images not loading Webpack/Webpack-dev-serve

Question

all my images seem to be 404, I think I have the right path as I just stuck them in the root directory

I am using file loader and trying to load svg files

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require('webpack');

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    // filename and path are required
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        // JSX and JS are all .js
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]
};

here is an example I setup: https://github.com/chobo2/webpack-serve-example

PlayMa256 · Accepted Answer · 2018-08-04 00:17:40Z

7

You have to import:

import image from './Freesample.svg'

And use it like;

<img src={image}/>

But you also need an appropriate loader for it, another rule:

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    // filename and path are required
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        // JSX and JS are all .js
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]
};

answered Aug 4, 2018 at 0:17

PlayMa256

6,8612 gold badges40 silver badges58 bronze badges

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

6 Comments

chobo2 Over a year ago

why do I need another loader for svg? It is already included in the one I had? I still don't get why I got to do an import, when before I did not have to do that. Did something change?

PlayMa256 Over a year ago

"why do I need another loader for svg?" - Unfortunately, because you need. Webpack architecture choices, nothing we can do. "It is already included in the one I had?" - Yes. You still need to import them as objects, so webpack can know what are the dependencies. Unfortunately that is how things works, nothing we can do.

chobo2 Over a year ago

Ok, just was surprising to me as I was looking at a project that I had using webpack 3.8 and I did not have to do this import stuff. Must have been changed in 4.0

chobo2 Over a year ago

though I copied your loader for .pngs and I am currently getting Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.

PlayMa256 Over a year ago

No, it did not change from 3>4. That does not tell much to be honest. I have no idea.

|

Mohamed · Accepted Answer · 2018-08-03 23:06:19Z

1

You need to use import.

import image from './Freesample.svg'

And use it like;

<img src={image}/>

answered Aug 3, 2018 at 23:06

Mohamed

1,2713 gold badges15 silver badges37 bronze badges

1 Comment

chobo2 Over a year ago

oh, wow did not think I needed to import my own images like this. Before I just did like how I have it in my example. Has it changed?

Collectives™ on Stack Overflow

Images not loading Webpack/Webpack-dev-serve

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related