#Importing Images

30 messages · Page 1 of 1 (latest)

versed magnet
#

Hey there, I'm running into a few issues regarding images. First of all, when I use await getImage, it returns an object. I'm trying to return this image through an endpoint, so I'm doing this:

return fetch(new URL(image.src, request.url))

Is this the correct way?

Also, I'm running into an issue where when I add a width and height to my getImage, it doesn't seem to change the size.

EDIT: even the format parameter doesn't seem to work

#

The image is an SVG, if that makes a difference

#

oh, apparently svg isn't supported :(

#

wait i think it is

prime anchor
#

svg don't get processed

#

They're supported in the sense that you won't get an error, the width and height still get applied to the img tag you could render through getImage, but the SVG itself doesn't get modified in any way

versed magnet
#

oh... i think it uses sharp under the hood though?

#

which does process svg?

prime anchor
#

yes, at this time we purposely don't use Sharp's SVG features

versed magnet
#

is there a reason for that?

prime anchor
#

they're a bit confusing for users

versed magnet
#

is there any workaround?

#

because i have a few icons i'm importing, and i would prefer to return them all with the same width and height

prime anchor
#

would you expect that it returns SVGs?

versed magnet
#

well i'm fine with a png

#

or something like that

prime anchor
#

okay, so it being a SVG doesn't matter at all then, right

#

my suggestion would be to make your own image service that wraps ours

#

you can do

import sharpService from "astro/assets/services/sharp";
import sharp from "sharp";

export default {
  ...sharpService,
  transform(buffer, options, imageConfig) {
    // Transform the buffer with Sharp as you prefer

    return {
      data: buffer,
      format: options.format,
    };
  },
}
versed magnet
#

i see, thanks for the link, i'll look into it!

prime anchor
#

I'd just make sure that what you're doing is really what you want to do

#

It's somewhat unusual to want to convert vector -> raster

versed magnet
#

i just realized i can change the width and height in the svg without changing the viewBox...

#

🤦

#

whelp that fixes my problem lmao

#

just want to confirm, is my approach the correct way?

const image = await getImage({src: icons.get(id) });

return fetch(new URL(image.src, request.url))
#

i'm not sure about the fetch

prime anchor
#

You can do that, yea