小编Ori*_*lad的帖子

我创建了一本故事书（没有 create-react-app 构建），并将其部署到 npm。\n当尝试在不同的 React 应用程序中使用其组件时，假设与组件一起渲染的 .png 图像根本不会加载（对于 .svg 图像，我已经设置了工作正常的配置）。

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

import borderPurpleDashed from '../../assets/borders/border-purple-dashed.png';\n\nborder-image: url(${borderPurpleDashed}) 30 / 1.5rem round;\n

然后在react-app中，当导入组件时，它尝试从自己的本地主机加载图像

\xe2\x80\x9chttp://localhost:3000/a87d8c2e5e8293b0372b.png\xe2\x80\x9d\n

webpack.config.js

const path = require('path');\nconst webpack = require('webpack');\nconst svgrLoader = require.resolve('@svgr/webpack');\n\nmodule.exports = {\n    mode: "production",\n    entry: './src/index.ts',\n    output: {\n        filename: 'index.js',\n        path: path.resolve(__dirname, 'dist'),\n        libraryTarget: 'umd',\n        clean: true\n    },\n    devtool: 'source-map',\n    resolve: {\n        extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],\n        modules: ['node_modules']\n    },\n    externals: {\n        react: "react"\n    },\n    module: {\n        rules: [\n …