Estoy escribiendo un complemento de actividad de moodle que usa javascript. Estoy usando webpack para agrupar la parte javascript del proyecto y luego se requiere el archivo javascript incluido dentro de view.php llamando a $PAGE->requires->js();. El view.php y el archivo javascript incluido no están dentro del mismo directorio.

La parte javascript del complemento necesitará cargar algunas imágenes. Deseo usar los módulos de activos integrados del paquete web para cargar las imágenes en lugar de una ruta absoluta. Seguí el gremio en la documentación del paquete web sobre gestión de activos ( https://webpack.js.org/guides/asset-management/#loading-images ). Sin embargo, parece que la ruta está configurada incorrectamente.

Deseo saber cómo cargar la imagen correctamente usando la administración de activos del paquete web.

Estas son las capturas de pantalla de la respuesta HTTP

Captura de pantalla de la respuesta HTTP cuando estoy usando una ruta absoluta para cargar la imagen

Captura de pantalla de la respuesta HTTP cuando estoy usando el módulo de activos del paquete web para cargar la imagen

Este es mi archivo de configuración de paquete web

 const path = require('path'); module.exports = { mode: 'development', entry: { test: './src/test.js', }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, ], }, };

Así es como importo la imagen dentro del archivo javascript

 import fullScreenButtonIcon from '../../assets/icon/fullscreen.png';

Esta es la estructura de mi proyecto.

 /srv/http/moodle/mod/assessmenttool/ ├── tasks │  ├── assets │  │  └── icon │  │  ├── fullscreen.png │  │  └── ... │  ├── dist │ │ └── ... │  ├── src │  │  ├── test.js │  │  └── ... │ ├── package.json │ ├── package-lock.json │  └── webpack.config.js ├── view.php └── ...