I’m trying to configure lazysizes with Nuxt and my urls are not handled by Webpack so I get a 404 error. I get the path src="~/assets/img.png"
instead of src="/_nuxt/assets/img.png"
. I added lazysizes
as an npm package and the following to my nuxt.config.js
file.
/* ** Plugins to load before mounting the App */ plugins: [ '~/plugins/lazysizes.client.ts', ], /* ** Build configuration */ build: { extend(_config, { isClient, loaders: { vue } }) { // Extend only webpack config for client-bundle if (isClient) { vue.transformAssetUrls.img = ['src', 'data-src'] } }, },
And this content to the plugins/lazysizes.client.ts
import lazySizes from 'lazysizes' export default lazySizes
For minimal reproduction, I just use a very simple image like so.
<img class="lazyload" data-src="~/assets/img.png" alt="Image description" loading="lazy" />
I worked off of this article https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm.
Advertisement
Answer
Found out the answer! If anyone comes here, for future reference, I solved it reading this article https://medium.com/@dannjb/a-lazy-loading-image-component-for-nuxt-js-c34e0909e6e1.
As I run SSR using yarn generate, I need the asset url transform to happen on the server too; the isClient check is removed.
After removing the isClient
check for SSR, I got it to work!