Hay varios hilos sobre este tema, pero ninguno de ellos me ha dado ningún resultado hasta ahora. Como sugiere el título, mi proyecto React contiene una etiqueta img, donde se proporciona un png como fuente.

Hasta ahora, he intentado usar el requisito de la ruta E importarlo como una variable. También agregué los cargadores en la configuración de mi paquete web, como puede ver a continuación.

También es de destacar que las dimensiones están realmente cargadas, y al hacer clic derecho para verificar la fuente de la imagen, el sitio web devuelve un No se puede OBTENER / [objeto% 20Objeto]

¡Cualquier idea es muy apreciada!

¡Gracias de antemano!

Etiqueta de imagen

 <img src={require('./mug1.png').default} className="mugImage" />

CSS

 .mugImage { object-fit: cover; width: 100%; height: 100%; z-index: 10; }

paquete web

 const HtmlWebPackPlugin = require("html-webpack-plugin"); const htmlPlugin = new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }); module.exports = { mode: "development", resolve: { fallback: { assert: require.resolve('assert'), crypto: require.resolve('crypto-browserify'), http: require.resolve('stream-http'), https: require.resolve('https-browserify'), os: require.resolve('os-browserify/browser'), stream: require.resolve('stream-browserify'), }, }, module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: ["style-loader", "css-loader"] }, { test: /\.(jpg|png|svg)$/, use: { loader: 'url-loader', options: { limit: 25000 } } }, { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { esModule: false, }, }, ], }, ] }, plugins: [htmlPlugin] };