System Information
Strapi Version :
Operating System :
Database :
Node Version :
NPM Version :
Yarn Version :
I can see many issues on my side concerning the integration strapi as an image provider in my nuxt 3 project .
<nuxt-img provider="strapi" src="..." :modifiers="{ breakpoint: 'small' }" />
Secondly: The url generated is wrong, it’s something like /uploads/large/my_image.png instead of/uploads/large_my_image.png
I can’t figure out how to make the image responsive depending on the screen size. Has anyone already used it before ?
Thank you!
worm
March 10, 2023, 12:02am
2
There is an open issue on the nuxt image module for this:
opened 09:08PM - 08 Nov 22 UTC
Hello!
I'm trying to using **Nuxt Image** with **Strapi** provider but `sizes… ` doesn't work as excepted.
<details>
<summary>nuxt.configs.js</summary>
```javascript
//...
image: {
strapi: {
baseURL: "http://localhost:1337/uploads",
},
}
```
</details>
Because when I use this code:
```vue
<nuxt-img
provider="strapi"
loading="lazy"
:src="`${data.file.url}`"
sizes="sm:100vw md:100vw lg:100vw"
/>
```
the output is:
```html
<img
src="http://localhost:1337/uploads/20190131_170142_8085401332.jpg" loading="lazy"
sizes="(max-width: 640px) 100vw, (max-width: 768px) 100vw, (max-width: 1024px) 100vw"
srcset="http://localhost:1337/uploads/20190131_170142_8085401332.jpg 640w,
http://localhost:1337/uploads/20190131_170142_8085401332.jpg 768w,
http://localhost:1337/uploads/20190131_170142_8085401332.jpg 1024w"
/>
```
As you can see, every `srcset` value **has the same url**...!
And here is the file data coming from **Strapi**:
```json
{
"url": "/20190131_170142_8085401332.jpg",
"height": 1440,
"width": 1440,
"formats": {
"thumbnail": {
"url": "/thumbnail_20190131_170142_8085401332.jpg"
},
"medium": {
"url": "/medium_20190131_170142_8085401332.jpg"
},
"small": {
"url": "/small_20190131_170142_8085401332.jpg"
},
"large": {
"url": "/large_20190131_170142_8085401332.jpg"
}
}
}
```
So the **excepted output should be**:
```html
<img
src="http://localhost:1337/uploads/20190131_170142_8085401332.jpg" loading="lazy"
sizes="(max-width: 640px) 100vw, (max-width: 768px) 100vw, (max-width: 1024px) 100vw"
srcset="http://localhost:1337/uploads/small_20190131_170142_8085401332.jpg 640w,
http://localhost:1337/uploads/medium_20190131_170142_8085401332.jpg 768w,
http://localhost:1337/uploads/large_20190131_170142_8085401332.jpg 1024w"
/>
```
But when I look into the Strapi Provider: (https://github.com/nuxt/image/blob/v1/src/runtime/providers/strapi.ts), I can't see anything about these **formats**...
So how can I put these `small`, `medium` and `large` urls into `srcset`?
Am I missing something, or is it just not implemented?
**Version**
`"@nuxt/image-edge": "^1.0.0-27769790.4b27db3",`
`"nuxt": "3.0.0-rc.11"`
Thanks!
So far no insight from the powers at be. I’m looking at the module code now, but no idea what could be the problem yet.