Estoy usando webpack 5 para agrupar un widget integrable. Parece que no puedo cargar una imagen creada sobre la marcha.
const img = document.createElement('img'); img.src = 'assets/doggo.svg'; http://localhost:8080/assets/doggo.svg da 404
En mi webpack.config.js tengo lo siguiente:
module: { rules: [ // Typecript { test: /\.ts|\.tsx$/, use: 'awesome-typescript-loader', include: __dirname }, // Images { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', }, // Fonts and SVGs { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', }, ], },A continuación se muestra la estructura de mi archivo:
├── package.json ├── postcss.config.js ├── src │ ├── index.ts │ ├── assets │ ├── index.html │ ├── index.ts │ ├── types.d.ts │ └── utils ├── tsconfig.json ├── webpack.config.js └── yarn.lockEl siguiente enfoque parece funcionar.
import doggoImg from './assets/doggo.svg'; const img = document.createElement('img'); img.src = doggoImg; const container = document.createElement('div'); container.appendChild(img);