How might I obtain a URL path to images in my project?

[stanleypliu]

Hello there,

I managed to set up Vite successfully, migrating away from the ever-confusing Webpacker, to work with Vue 3 on a new Rails 6 app and it's working great when bundling assets - super fast! However, I've noticed that in a particular component of mine, where I'm dynamically importing images as props, that I've had to use this ugly prefix in order to get it to display successfully in development.

<template>
  <div
    class="hero-large"
    :style="image"
  >
  ...
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'HeroLarge',
  props: {
    backgroundImage: {
      type: String,
      default: '/vite-dev/@fs/Users/stanleyl/price-tracker/app/frontend/images/photos/ecommerce.jpg'
    }
  },
  setup(props) {
    const image = computed(() => { return { 'background-image': 'url("' + props.backgroundImage + '")' } })

    return {
      image
    }
  }
}
</script>

I'm guessing I could probably get round this by configuring my publicOutputDir in vite.json (which is in its default state, I haven't changed or added any new options), but I'm not sure exactly how to go about this from reading the docs alone. Could be a simple solution, but any help would be great! Thanks

[ElMassimo]

Hi! Happy to hear that it's working well for you.

Using @fs paths will not work in production, so I'd recommend to avoid using them directly.

---

If you only need a path to the default image, you could import it:

import ecommerceImagePath from '~/images/photos/ecommerce.jpg'

In development it will be the same path you wrote by hand, but it also works in production, and is less error prone since moving or deleting the image will cause the build to fail.

---

If you need to do this for many images and don't want to import them manually, you could use import.meta.globEager:

const photos = import.meta.globEager('../images/photos/**/*')

const imagePath = photos['../images/photos/ecommerce.jpg'].default

One downside of this approach is that you can't use aliases in the glob path, it has to be explicit.

You could then use it to receive an image name, to make the external API of the component a bit nicer:

const getPhotoUrl = name => photos[`../images/photos/${name}.jpg`].default

const image = computed(() => ({ 'background-image': `url("${getPhotoUrl(props.backgroundImage)}")` }))

[ElMassimo]

@stanleypliu Took the liberty to rename the thread in case someone is facing the same problem, but please let me know if I misunderstood and we can revisit if you need to reconfigure the output dir.

[stanleypliu]

Thanks @ElMassimo! Yes, I was well aware that it couldn't possibly be the @fs path (as it's super specific), but wanted to import images dynamically for reasons of reusability re: the component as it could be used for multiple pages.

I like the look of that last solution. However, where would I place the import.meta.globEager directive and how would I expose photos to individual SFCs? Would it go into application.js perhaps, or one of the new-style composables that Vue 3 uses?

[ElMassimo]

You could place it on any JS file, and then export the photos object, which you can import from any component.

If you plan to use it in more than one component, using a composable like you mentioned would work, but also a plain function:

// app/frontend/utils/photos.js

const photos = import.meta.globEager('../images/photos/**/*')

export function getPhotoUrl(name) {
  const mod = photos[`../images/photos/${name}.jpg`]
  if (!mod) throw new Error(`No photo available for ${name}`)
  return mod.default
}

For simple components, and specially when not using Typescript, I find the Options API is still nice and succinct.

<script>
import { getPhotoUrl } from '~/utils/photos'

export default {
  name: 'HeroLarge',
  props: {
    backgroundImage: { type: String, default: 'ecommerce' }
  },
  computed: {
    image () {
      return { 'background-image': `url("${getPhotoUrl(this.backgroundImage)}")` }
    },
  },
}
</script>

But you could use computed in script setup, like the example I wrote in a previous comment. Good luck!

[stanleypliu]

Awesome, thanks a lot!

[ruanltbg]

Just an upgrade with the latest version as globEager does not exist anymore.

// app/frontend/utils/photos.js

const photos = import.meta.glob('../images/photos/**/*', { eager: true })