@islands/images: Asset URL transformation in a custom Picture component

[lutuh]

Hello Máximo,

me again. :)

This time I would like to ask you about some internals of the @islands/images module. Such a cool module! The Picturecomponent is great.

I would like to add custom CSS classes to the picture tag in the Picture component, so I copied the Picture component into my project's component folder, gave it a different name and added my props and customizations. It worked, with one difference:

The original Picture component's src prop is somehow automatically resolved from a path into a resource (not sure if that is the right wording). Looking through the module's source code, I think that this is due to the transformAssetUrls config: https://github.com/ElMassimo/iles/blob/main/packages/images/src/images.ts#L61

When I use my CustomPicture component though, I first have to import the asset and then hand it over.

<script setup>
import myPicture from '@/assets/img/my_picture.jpg?preset=hd'
</script>

<template>
  <CustomPicture :src="myPicture"/>
  
  <!-- I would like to do this, just as with your Picture component -->
  <CustomPicture src="@/assets/img/my_picture.jpg?preset=hd"/>
</template>

There is no automatic asset transform. As I might have to handle quite a few images this way, handing over the asset path directly instead of first importing it would be a nice efficiency gain.

What I tried

I tried to create a custom module based on your images module and played around with that. Somehow it worked, but there where no more <source> tags being created. I also tried transforming the asset path using URL.

Thank you very much for showing a way to perform that asset path transformation in a custom Picture component.

Lucas

[ElMassimo]

@lutuh You are looking for the transform Vue performs to extract src and srcset urls as imports, which can be configured manually by providing template.transformAssetUrls.tags to @vitejs/plugin-vue.

Since Vite doesn't seem to combine these options, you might need to provide all of the ones you intend to use, in addition to your CustomPicture: ['src'],.

---

An example custom component I'm using in some of my sites, which uses the Picture component internally:

<script setup lang="ts">
import { useAttrs } from 'vue'

const attrs = useAttrs()

const props = defineProps({
  src: { type: [String, Array], required: true },
  narrow: { type: Boolean, default: false },
  square: { type: Boolean, default: false },
  wide: { type: Boolean, default: false },
})

let title = $computed(() => attrs.title || attrs.alt)
</script>

<template>
  <Picture
    class="img"
    loading="lazy"
    :src="src"
    :class="{ narrow, square, wide, captioned: $slots.default }"
    v-bind="$attrs"
  />
  <Caption v-if="$slots.default">
    <slot/>
  </Caption>
</template>

I recommend this pattern, since it abstracts any details about @islands/images, simplifying future upgrades.

[lutuh]

Hello Máximo,

thank you very much for your explanation and the example component.

I added the asset transform to my iles.config.ts and now the src attribute is properly transformed.

export default defineConfig({
  // ...
  vue: {
    template: {
      transformAssetUrls: {
        tags: {
          CustomPicture: ['src'],
        },
      },
    },
  },
})

I am going to refactor my custom component as well. I can do the styling from outside the Picture component.

Thanks again!
Lucas