How to properly configure .png images in webpack? - reactjs

Question

Iv'e created a storybook (build without create-react-app) which deployed to npm.
When trying to use its components in a different react application the .png images that suppose to be rendered together with the component are not loading at all (for .svg images I have set configuration which works fine).
In the storybook I'm trying to import the png as the following:
import borderPurpleDashed from '../../assets/borders/border-purple-dashed.png';
border-image: url(${borderPurpleDashed}) 30 / 1.5rem round;
Then in the react-app when importing the component it tries to load the image from its own 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

Did you try file-loader?
In webpack.config.js, add this in the rule array:
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
]
}
OR
You could refer to the storybook documentation for assets