如何正确配置webpack中的.png图像？

Question

Iv'e创建了一个故事书(构建没有创建-反应-应用程序)，部署到npm。当尝试在不同的react应用程序中使用其组件时，应该与组件一起呈现的.png映像根本没有加载(对于.svg映像，我已经设置了可以正常工作的配置)。

在故事书中，我试图导入png如下所示：

import borderPurpleDashed from '../../assets/borders/border-purple-dashed.png';

border-image: url(${borderPurpleDashed}) 30 / 1.5rem round;

然后，在-app中，当导入组件时，它尝试从自己的localhost加载映像。

“http://localhost:3000/a87d8c2e5e8293b0372b.png”

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const svgrLoader = require.resolve('@svgr/webpack');

module.exports = {
    mode: "production",
    entry: './src/index.ts',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'umd',
        clean: true
    },
    devtool: 'source-map',
    resolve: {
        extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
        modules: ['node_modules']
    },
    externals: {
        react: "react"
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                use:['ts-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.(css|s[ac]ss)$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
            {
                test: /\.svg$/i,
                type: 'asset',
                resourceQuery: /url/, // *.svg?url
            },
            {
                test: /\.svg$/i,
                issuer: /\.[jt]sx?$/,
                resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
                use: [
                    {
                        loader: svgrLoader, options: {
                            svgoConfig: {
                                plugins: [
                                    {
                                        name: 'removeViewBox',
                                        active: false
                                    }
                                ]
                            }
                        }
                    },
                ]
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|)$/,
                type: 'asset/inline',
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg|)$/i,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            FroalaEditor: 'file_name'
        })
    ]
};

tsconfig.json

{
      "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "target": "es5",
        "module": "es2015",
        "jsx": "react",
        "strict": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "noUnusedLocals": true,
        "types": ["node", "mocha", "jest","cypress", "cypress-file-upload","./cypress/support"],
        "lib": ["es5","es2015","es2016", "dom","esnext"],
        "outDir": "./dist/",
        "sourceMap": true,
        "declarationMap": true,
        "declaration": true,
        "resolveJsonModule": true,
      },
      "include": [
        "src",
        "node_modules/cypress/types/cypress-global-vars.d.ts"
      ],
      "exclude": ["node_modules", "dist", "**/*.stories.tsx", "**/*.test.tsx"]
    }

Answer 1

你试过文件加载器吗？

在webpack.config.js中，将其添加到规则数组中：

{
    test: /\.(png|jpe?g|gif)$/i,
    use: [
      {
        loader: 'file-loader',
      },
    ]
}

或

您可以参考资产的故事书文档