Can't inline svg with loader, referencing to root folder of os

[larizzatg]

Specs:

Machine: Windows
Environment: http://localhost:8080
Loaders: file-loader
Plugin Version: 1.0.3

Project Structure

Root

• config/
• dist/
• node_modules/
• src/
  • css/
  • img/
  • illustrations/
    • blue-main-sent.svg
  • js/
  • templates/
  • test.html
• .babelrc
• .gitignore
• .package-lock.json
• .package.json
• .README.MD

Webpack Config

var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');

module.exports = {
    entry: {
        app: './src/js/app.js'
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js',
       //not needed because the index html will be in dist folder
       //publicPath: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'img/'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        extractPlugin,
        new HtmlWebpackInlineSVGPlugin(),
        new HtmlWebpackPlugin({
            filename: 'test.html',
            template: 'src/test.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/templates/index.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'login.html',
            template: 'src/templates/aaa/login.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'register_1.html',
            template: 'src/templates/aaa/register_1.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'register_2.html',
            template: 'src/templates/aaa/register_2.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'register_3.html',
            template: 'src/templates/aaa/register_3.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password_1.html',
            template: 'src/templates/aaa/reset_password_1.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password_2.html',
            template: 'src/templates/aaa/reset_password_2.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password_3.html',
            template: 'src/templates/aaa/reset_password_3.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'select_users.html',
            template: 'src/templates/aaa/select_users.html'
        }),
        new CleanWebpackPlugin(['dist'])
    ]
};

HTML Template x

<img inline src="/img/blue-main-sent.svg">

Problem

I installed the plugin and follow the directions as the readme says, however when I compile the project the plugin breaks, with the following error:

undefined processImages hit error Error: ENOENT: no such file or directory, open 'C:\img\blue_main_sent.svg' ENOENT: no such file or directory, open 'C:\img\blue_main_sent.svg'

I don't know why when I put the inline tag in my SVG it want's to load the SVG from the C: root. I'm using file-loader and without the inline tag it works well, the readme said that the plugin will act after the SVG is loaded so if the file loader can get the SVG why the plugin not?

What I have to do or change?

[theGC]

@skayablars I'd assume file-loader is ignoring the image as it's an absolute path. This module doesn't do that as yet...

Looking at the number of templates you have, and in turn their various locations and directory levels you may like to set up an alias in webpack for your src directory. Don't have to but would allow you to make the below paths all the same and let webpack resolve their actual location on disk.

However, I'd imagine things will work as expected if you change your paths to:

template: src/test.html
img tag: <img inline src="img/blue-main-sent.svg">

template: src/templates/index.html
img tag: <img inline src="../img/blue-main-sent.svg">

etc.. essentially just use relative paths for the src attributes

[theGC]

I'm going to close this as supporting absolute paths isn't a requirement for a plugin that replaces the image tags.