Al usar responsive-loader , espero el retorno de un objeto. En cambio, recibo una cadena base64, es decir, data:image/jpeg;base64,bW9kdWxlLmV... .
Desafortunadamente, las pocas respuestas que encontré en otras publicaciones no han resuelto mi problema.
Vue 3.2.31, Cargador sensible 2.3.0, Sharp 0.30.3
vue.config.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') const ResponsiveLoaderSharp = require('responsive-loader/sharp') module.exports = { chainWebpack: config => { config.plugin('polyfills').use(NodePolyfillPlugin) config.module .rule('images') .use('url-loader') .loader('responsive-loader') .options({ adapter: ResponsiveLoaderSharp, name: 'img/[name]-[width].[hash:8].[ext]', format: 'webp', quality: 60, sizes: [320, 640, 960, 1200], }) }, }Plantilla Vue
<script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ setup(){ const myImage = require('@/assets/my-image.jpg') console.log(myImage) } }) </script>El problema estaba relacionado con los nuevos módulos de activos de Webpack.
https://webpack.js.org/guides/asset-modules/
Aquí está la configuración inicial compilada de Vue3 Webpack:
/* config.module.rule('images') */ { test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/, type: 'asset', generator: { filename: 'img/[name].[hash:8][ext]' } }, Para modificar, type: 'asset' debe anularse con type: 'javascript/auto' para evitar la duplicación de activos.
Usando chainWebpack (no encontrado en ninguna documentación que haya visto hasta la fecha):
config.module .rule('images') .type('javascript/auto') .use('responsive') .loader('responsive-loader') .options({ adapter: require('responsive-loader/sharp'), format: 'webp', })