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

score 7 · Accepted Answer · answered Aug 04 '18 at 00:17

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 04 '18 at 00:17

PlayMa256

6,603
2
34
54

1

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? – chobo2 Aug 06 '18 at 02:55
"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. – PlayMa256 Aug 06 '18 at 11:17
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 Aug 08 '18 at 22:31
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. – chobo2 Aug 08 '18 at 22:34
No, it did not change from 3>4. That does not tell much to be honest. I have no idea. – PlayMa256 Aug 09 '18 at 00:04
hmm, then I don't know how I was doing it the other way in version 3. That is the only error I am getting, it is weird it only sometimes happens. Not always. – chobo2 Aug 09 '18 at 16:12

score 1 · Answer 2 · answered Aug 03 '18 at 23:06

1

You need to use import.

import image from './Freesample.svg'

And use it like;

<img src={image}/>

answered Aug 03 '18 at 23:06

Mohamed

1,251
3
15
36

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? – chobo2 Aug 03 '18 at 23:11

Images not loading Webpack/Webpack-dev-serve

2 Answers2

Linked