Nuxt Image sizes attribute doesn't work with Strapi provider

[maximelebreton]

Hello!

I'm trying to using Nuxt Image with Strapi provider but sizes doesn't work as excepted.

nuxt.configs.js

//...
  image: {
    strapi: {
      baseURL: "http://localhost:1337/uploads",
    },
  }

Because when I use this code:

<nuxt-img
    provider="strapi"
    loading="lazy"
    :src="`${data.file.url}`"
    sizes="sm:100vw md:100vw lg:100vw"
/>

the output is:

<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:

{
  "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:

<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!

[aufdenpunkt]

I have the same case, and it would be awesome if there were a solution 🙂

[highoncarbs]

any update on this ?

[PeritonM]

Yeah this is super annoying. The integration of Nuxt with Strapi in general doesn't seem very well documented at all.

Hope there will be an update for this soon.

[highoncarbs]

@PeritonM I switched to cloudinary, that seems to be working and for local images add provider="static"

[jiblett1000]

Hey ya'll,

So after looking into the code what I can surmise is that this is not currently possible and is not technically a bug in the module. What is happening is that by default, Strapi does not provide url parameters to request custom images. However, the module is using the sizes in the prop to request images using said url parameters and then set the srcset attribute accordingly. I added a console.log to the module locally to see what the srcset came out to. This is what it was:

srcset
: 
"http://0.0.0.0:1337/uploads/image.jpg 128w, http://0.0.0.0:1337/uploads/image.jpg 320w"

As you can see, since Strapi doesn't support query parameters or anything like that, nuxt-image is just using the same image url everytime. I'm considering working on a PR that incorporates this strapi plugin:

https://www.npmjs.com/package/strapi-plugin-local-image-sharp

That should theoretically enable the ability to use sizes with strapi after mapping the parameters to the plugin.. However since this a 3rd party plugin, it doesn't seem ideal. It is also the only foreseeable solution until Strapi includes this functionality by default.

I would love to hear from the nuxt team on this. I would be happy to work on a PR for this functionality.

[jiblett1000]

In the event the above PR doesn't get accepted, I'm posting instructions here for implementing the "local image sharp" plugin as a custom provider in Strapi.

1. Install the local image sharp Strapi plugin. https://market.strapi.io/plugins/strapi-plugin-local-image-sharp

2. Create the file ~/providers/localImageSharp.ts and inside put:

import { joinURL } from "ufo";
import type { ProviderGetImage } from "@nuxt/image-edge";
import { createOperationsGenerator } from "#image";

export const getImage: ProviderGetImage = (
  src,
  { modifiers, baseURL = "http://localhost:1337/uploads" } = {}
) => {
  const operationsGenerator = createOperationsGenerator({
    keyMap: {
      width: "width",
      height: "height",
      resize: "resize",
      fit: "fit",
      position: "positon",
      trim: "trim",
      format: "format",
      quality: "quality",
      rotate: "rotate",
      enlarge: "enlarge",
      flip: "flip",
      flop: "flop",
      sharpen: "sharpen",
      median: "median",
      gamma: "gamma",
      negate: "negate",
      normalize: "normalize",
      threshold: "threshold",
      grayscale: "grayscale",
      animated: "animated",
    },
    joinWith: ",",
    formatter: (key: string, value: string) => `${key}_${value}`,
  });

  const operations = operationsGenerator(modifiers as any);

  return {
    url: joinURL(baseURL, operations, src),
  };
};

3. Add this in your nuxt.config.ts:

image: {
    providers: {
      localImageSharp: {
        provider: "~/providers/localImageSharp",
        options: {
          baseURL: `${process.env.STRAPI_URL}/uploads/`,
        },
      },
    },
    provider: 'localImageSharp'
  },

4. Sit back and enjoy sizes working properly.

*Note: The median modifier doesn't seem to be working. I've raised an issue in the local image sharp plugin repo.

Also, if you have any ideas on how to improve upon the above code, feel free to chime in of course.

Cheers!

[ulysse-lacour]

@jiblett1000 Pardon me but what is this file #image in 'import { createOperationsGenerator } from "#image";' ?

Your solution seems perfect but I can't manage to make it work...

[jiblett1000]

Hello @ulysse-lacour . #image is a directory alias added by the nuxt/image module. Ctrl + clicking on it should bring you to the index file of the image module.

[ulysse-lacour]

@jiblett1000 Thank you very much, didn't realized I needed both nuxt/image and nuxt/image-edge (if I'm not mistaking)!
Set up for provider works like a charm thanks to your instructions, I have a silly question but I think a few beginners like me would really appreciate to make sure they set up cleanly : how can I make sure the sizes are finally working ?

Using this :

<nuxt-img
    loading="lazy"
    :src="`${post.attributes?.Image?.data?.attributes?.url}`"
    sizes="sm:100vw md:100vw lg:100vw"
/>

Render this img tag :

<img src="http://localhost:1337/uploads/width_1024/uploads/SQUARE_IMAGE_e2ad4450a0.png" onerror="this.setAttribute('data-error', 1)" loading="lazy" data-nuxt-img="" sizes="(max-width: 640px) 100vw, (max-width: 768px) 100vw, 100vw" srcset="http://localhost:1337/uploads/width_640/uploads/SQUARE_IMAGE_e2ad4450a0.png 640w, http://localhost:1337/uploads/width_768/uploads/SQUARE_IMAGE_e2ad4450a0.png 768w, http://localhost:1337/uploads/width_1024/uploads/SQUARE_IMAGE_e2ad4450a0.png 1024w">

So it seems to work but weirdly my files in Strapi are named like this small_SQUARE_IMAGE_e2ad4450a0.png/thumbnail_SQUARE_IMAGE_e2ad4450a0 and not with that folder architecture with width in this example.

Hopefully I'm not the ones confused by the names differences and how Strapi is handling images.

[jiblett1000]

@ulysse-lacour

You do not need to install both versions. You can use the rc release of the @nuxt/image package.

You can see if it's working by changing the "size" for one of the screen breakpoints and seeing the resulting change in file size / resolution of the requested image. For example, create a fullscreen image and then change the image size in the sizes prop from say 100vw to 20vw and you should see how the image quality is degraded and the file size is less because it's now requesting an image for only 20% of the screen width.

The addition of "width" or whatever modifiers you're using via the nuxt image custom provider above are added to the url by nuxt/image and utilized on the backend (strapi) by the local image sharp plugin to return the correctly sized image.

[jiblett1000]

@ulysse-lacour You might also consider forming your src strings like this:

:src="${image.data.attributes.hash}${image.data.attributes.ext}"

Depending on how your base url is configured in nuxt/image, this might be necessary so it doesn't add an additional uploads into the url.

At least I seem to recall having an issue like that before. It's been a bit since I was working on this.

[ulysse-lacour]

Thank a lot @jiblett1000 you're an absolute chef, it was indeed working, just had to play with sizes attribute to realize it!
If you have some ressources in mind to learn more on Nuxt x Strapi integration feel free to share they would be really useful to me :)

[jiblett1000]

@ulysse-lacour No worries. Not sure I can really point you towards any particular resources except for the nuxt/strapi module (if you're not already using it). https://strapi.nuxtjs.org/