Using responsive-loader, I am expecting the return of an object. Instead, I am receiving a base64 string, i.e. data:image/jpeg;base64,bW9kdWxlLmV....
Unfortunately, the few answers I've found on other posts have not resolved my issue.
Vue 3.2.31, Responsive Loader 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],
})
},
}
Vue Template
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
const myImage = require('@/assets/my-image.jpg')
console.log(myImage)
}
})
</script>
The issue was dealing with Webpack's new asset modules.
https://webpack.js.org/guides/asset-modules/
Here is the starting compiled Vue3 Webpack configuration:
/* config.module.rule('images') */
{
test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
type: 'asset',
generator: {
filename: 'img/[name].[hash:8][ext]'
}
},
To modify, type: 'asset' must be overridden with type: 'javascript/auto' to prevent asset duplication.
Using chainWebpack (not found in any documentation I've seen to date):
config.module
.rule('images')
.type('javascript/auto')
.use('responsive')
.loader('responsive-loader')
.options({
adapter: require('responsive-loader/sharp'),
format: 'webp',
})