Getting wrong path using Strapi provider

[NGrPXL]

hi there,

I'm trying to get the image module working with Nuxt 2.15 and Strapi 4.1.5 working but after following the documentation setup for strapi, the path returned in my nuxt app is wrong. Here's my config Nuxt.config.js image: { provider: 'strapi', strapi: { baseURL: process.env.IMAGE_URL // set in .env file }, },

the image tag in my Component.vue <nuxt-picture provider="strapi" :src="${images.attributes.url}" :modifiers="{ breakpoint: 'large' }" />

I'm expecting the following output:

but instead, the path is wrote like this:

not sure if it's an error on my side or anything else. I've look into the strapi.ts provider file, but found no clues. I've also purged and reinstalled my node_modules folder but it made no changes.

Thank for any help

[martinkosmela]

Hey @NGrPXL, have you managed to find a solution? I've got the same problem when trying to use modifiers

[NGrPXL]

Hey @martinkosmela

I finally just found the solution while working in another project. You would do something like this: In my example I'm parsing a gallery but should be the same for a single image <nuxt-img loading="lazy" :src=" productsGallery[index].attributes.gallery[0].images.data[0].attributes.hash + productsGallery[index].attributes.gallery[0].images.data[0].attributes.ext" :modifiers="{ breakpoint: 'medium' }" />

So the idea is to use the hash key in your object and append the ext key also because when Strapi generate different size, it append an unique identifier to the different sizes generated.

I think this part should be added to the docs because it's not very clear at first. Hope this will help you.

[Rvervuurt]

This doesn't seem like a thing that has to be added to the docs, this looks like a thing that has to be fixed on the Nuxt-end. Why does it add /small_uploads/ instead of /uploads/, when that folder doesn't exist at all? Maybe Strapi changed their way of storing uploads, but based on this issue, it seems like it has been the case for over a year?!

Edit: now I understand. it's not looking for a folder called small_uploads, it's prepending the string with small_, and if that string starts with uploads, it of course outputs small_uploads. The above solution works, but only if you update your baseURL to include /uploads.

image: {
    strapi: {
      baseURL: process.env.STRAPI_URL + '/uploads'
    },
    format: ['webp'],
  },