How to properly configure .png images in webpack?

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"]
    }

Portugal

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

Distressful

Yes, @Krushnal. It wasn't useful – Portugal

If your png image in public folder? – Distressful

Yes, @Krushnal, it is sitting in the same folder where the SVG's – Portugal