image: Nuxt Image sizes attribute doesn't work with Strapi provider

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!

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 9
Comments: 17

Most upvoted comments

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.

Install the local image sharp Strapi plugin. https://market.strapi.io/plugins/strapi-plugin-local-image-sharp
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),
  };
};

Add this in your nuxt.config.ts:

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

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!

jiblett1000 on Mar 11, 2023

any update on this ?

highoncarbs on Mar 4, 2023

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.

jiblett1000 on Aug 9, 2023