When utilizing responsive-loader, I was anticipating an object as the return value. However, what I am getting instead is a base64 string in the format of
data:image/jpeg;base64,bW9kdWxlLmV...Unfortunately, the solutions from other posts that I have come across did not resolve my particular issue.
Vue version 3.2.31, Responsive Loader version 2.3.0, Sharp version 0.30.3
Contents of vue.config.js file
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 code snippet
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
const myImage = require('@/assets/my-image.jpg')
console.log(myImage)
}
})
</script>