使用 webpack 获取图片时出现 404

Question

我正在关注此 link 以将图像添加到我的包中：

https://webpack.js.org/guides/asset-management/

我的根文件夹中有以下文件结构：

index.html

index.js

images 文件夹（带有 svg）

这是我的webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');

const isProduction = process.env.NODE_ENV === 'production';
const HtmlWebpackPlugin = require("html-webpack-plugin");

const stylesHandler = 'style-loader';



const config = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    devServer: {
        open: true,
        historyApiFallback: true,
        host: 'localhost'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Custom template',
            // Load a custom template (lodash by default)
            template: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'images',
            },
        ]
    }
};


module.exports = () => {
    if (isProduction) {
        config.mode = "production";
    } else {
        config.mode = "development";
    }
    return config;
};

我正在使用以下 webpack 模块：

    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0",
    "wepack-cli": "0.0.1-security"

在我的 js 文件中，我试图通过执行以下操作将图像添加到 SVG 元素：

.attr('xlink:href', 'images/virtual-machine.svg')

但我得到 404。

Answer 1

尝试使用 resource 资产模块

  rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
        ]

现在 webpack 必须知道你正在使用这个图像。导入后应该可以工作。

确保路径正确，因为它将从当前文件夹查找路径

import virtualMachineSvg from 'images/virtual-machine.svg'

.attr('xlink:href', virtualMachineSvg)

或require

const virtualMachineSvg = require('images/virtual-machine.svg');

.attr('xlink:href', virtualMachineSvg)

使用 webpack 获取图片时出现 404

404 when fetching image with webpack

webpack

webpack-dev-server

webpack-file-loader