How to reference images with a dynamic path?

[mseele]

Is there any possibility to load dynamic images? I have the following use case:
I load a list of events from my headless cms. All events have an attribute title image that is named like an image i have in my assets folder. Now i want to use vite-plugin-image-presets with the picture vue sfc and the image described in the event attribute.
Is there any pattern i can use to do this?

My workaround is a sfc called DynamicPicture that looks like this:

<template>
  <Picture :src="src" />
</template>

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

import event_img_1 from '@/assets/events/event_img_1.jpg?preset=full'
import event_img_2 from '@/assets/events/event_img_2.jpg?preset=full'
import event_img_3 from '@/assets/events/event_img_3.jpg?preset=full'

let assets = new Map<string, any>([
  ['event_img_1.jpg', event_img_1],
  ['event_img_2.jpg', event_img_2],
  ['event_img_3.jpg', event_img_3],
])

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const src = computed(() => assets.get(props.name))
</script>

It works. But i need to add a line of code every time i add a new event image into the assets directory (what happens sometimes).

[ElMassimo]

Starting in Vite 4, you can use glob imports.

Unfortunately, Vite currently does not support passing query parameters in glob imports, which would be an automatic way to generate a similar structure to the map in your example. It might be added in the future, perhaps you can suggest it as a feature request in Vite.

---

This plugin does provide a programmatic API that can be used directly in Vite plugins:

const image = await images.api.resolveImage('@/assets/events/${imageName}`, { preset: 'full' })

For certain use cases this is a reasonable approach, such as when using extendFrontmatter in îles.

---

Moving this to discussions, feel free to ask additional questions.

[ElMassimo]

@mseele This plugin might do what Vite doesn't yet support in glob imports:

• https://github.com/antfu/vite-plugin-glob

Opened an issue so that we can discuss this type of usage.

[Hextar]

Hi @ElMassimo, is there any update on that one?

I'm trying to create a component where src it's just a String prop, and you just pass presets as a String Array.

<template>
  <picture class="picture" :style="style" v-bind="{ ...pictureAttrs }">
    <source v-for="(attrs, index) in sources" :key="index" v-bind="attrs" />
    <img class="picture__image" :alt="alt" :title="alt" v-bind="{ ...lastSource, ...imgAttrs }" />
  </picture>
</template>

<script setup lang="ts">
import { computed, useAttrs, PropType, onMounted, ref, Ref } from 'vue'
import createImageApi from 'vite-plugin-image-presets'

type SourceSet = {
  class?: string
  loading?: string
  sizes?: string
  src?: string
  srcset?: string
  type?: string
}
const attrs = useAttrs()

// PROPS
const props = defineProps({
  src: { type: String, default: '' },
  presets: { type: Array as PropType<String[]>, default: () => ['hd'] },
  alt: { type: String, default: '' },
  height: { type: Number, default: undefined },
  width: { type: Number, default: undefined },
})

// VARIABLES
const allSources: Ref<SourceSet[]> = ref([])

// COMPUTED
const style = computed(
  (): Record<string, string | undefined> => ({
    height: props.height ? `${props.height}px` : undefined,
    width: props.width ? `${props.width}px` : undefined,
  })
)

const pictureAttrs = computed(() =>
  Object.keys(attrs)
    .filter((key: string) => key === 'class')
    .reduce((obj: any, key: string) => {
      obj[key] = attrs[key]
      return obj
    }, {})
)

const imgAttrs = computed(() =>
  Object.keys(attrs)
    .filter((key: string) => key !== 'class')
    .reduce((obj: any, key: string) => {
      obj[key] = attrs[key]
      return obj
    }, {})
)

const sources = computed((): SourceSet[] => {
  const all = allSources.value
  return (all || []).slice(0, -1)
})

const lastSource = computed((): SourceSet => {
  const all = allSources.value
  return (all || [])[(all || []).length - 1]
})

// ON MOUNTED
onMounted(async () => {
  const {  api: { resolveImage } } = createImageApi()
  allSources.value = await resolveImage(props.src, { preset: props.presets.join(',') })
})
</script>

<style lang="scss" scoped>
.picture {
  &__image {
    height: 100%;
    width: 100%;
  }
}
</style>

For sure I'm doing something wrong as it cause several errors:

Do you think it's possible to just fetch one image as I'm trying to avoid fetching the whole map of images? (eg: within '/public/images/**/*.jpg').

[ElMassimo]

It's not possible to support this use case with this plugin (it needs to know the path statically in order to resolve it).

Since the src is provided to the component externally, it would need to run in the Vite node.js server (not the browser) in order to generate new images as needed.

It would be possible to add a layer of middleware to handle paths with ?preset= during development, but the problem is you wouldn't be able to infer them at build time.

For dynamic paths like this, I'd recommend you instead use a service like Cloudinary that can perform transforms on the fly.