Assets with dynamic names are not resolved #14766

tobiasdiez · 2022-08-31T21:25:35Z

Environment

Operating System: Linux
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.8
Package Manager: npm@7.17.0
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-pq8nym?file=app.vue

Describe the bug

If you have an image referencing a dynamic asset, e.g.

<template>
  <img :src="`~/assets/${dynamic_image_name}`" alt="Discover Nuxt 3" />
</template>
<script setup lang="ts">
const dynamic_image_name = 'zero-config.svg';
</script>

then this is rendered as

<img src="~/assets/zero-config.svg" alt="Discover Nuxt 3">

without correctly resolving (and copying) the image, thus it doesn't show in the browser.

Additional context

Refs nuxt/framework#6635.

Logs

No response

The text was updated successfully, but these errors were encountered:

danielroe · 2022-09-15T10:54:32Z

I believe this is vite and @vitejs/plugin-vue behaviour. It's a bit complicated, but you can do this with import.meta.glob:

https://stackblitz.com/edit/github-pq8nym-aoavsh

<template>
  <img :src="images[dynamic_image_name]" alt="Discover Nuxt 3" />
</template>
<script setup lang="ts">
import { filename } from 'pathe/utils';

const glob = import.meta.glob('~/assets/*.svg', { eager: true });
const images = Object.fromEntries(
  Object.entries(glob).map(([key, value]) => [filename(key), value.default])
);

const dynamic_image_name = 'zero-config';
</script>

tobiasdiez · 2022-09-15T13:48:02Z

Thanks @danielroe, this works like a charm! Do you think it makes sense to add the following helper method as a built-in composable?

function useAsset(path: string): string {
  const assets = import.meta.glob('~/assets/**/*', {
    eager: true,
    import: 'default',
  })
  // @ts-expect-error: wrong type info
  return assets['/assets/' + path]
}

//Usage: <img :src="useAsset(dynamic_image_name + '.svg')" alt="Discover Nuxt 3" />

danielroe · 2022-09-15T15:08:39Z

I would highly recommend use with file extension, as the glob with eager will end up including content of all imports within your build. Probably safe with images (includes just files) but you wouldn't want to accidentally include anything else. (CSS files, would get included not as filenames but as actual CSS.)
As for a composable, it's an interesting idea. But I'm very cautious. I wonder if it would tree-shake out properly if not used.

mattyleggy · 2022-09-24T13:11:23Z

Is this the only way to get dynamic images in Nuxt 3? Was super easy in Nuxt 2 with require.

jamiecarter7 · 2022-10-28T02:11:50Z

+1 - I use the require() method to build 500 static pages using about 600 images which are inserted dynamically, a solution to this will be very much appreciated

wangrongding · 2022-11-10T01:10:31Z

Wait for the official to provide a better solution.😅😅

3aluw · 2022-11-11T20:56:55Z

I believe this is vite and @vitejs/plugin-vue behaviour. It's a bit complicated, but you can do this with import.meta.glob:

https://stackblitz.com/edit/github-pq8nym-aoavsh
<template>
  <img :src="images[dynamic_image_name]" alt="Discover Nuxt 3" />
</template>
<script setup lang="ts">
import { filename } from 'pathe/utils';

const glob = import.meta.glob('~/assets/*.svg', { eager: true });
const images = Object.fromEntries(
  Object.entries(glob).map(([key, value]) => [filename(key), value.default])
);

const dynamic_image_name = 'zero-config';
</script>

Can someone explain this solution a little ?
What is the point of this import ? import { filename } from 'pathe/utils';

manniL · 2022-12-04T17:37:36Z

Is this the only way to get dynamic images in Nuxt 3? Was super easy in Nuxt 2 with require.

I think having some way to improve DX and fetch dynamic images easier would be helpful indeed ☺️

manniL · 2022-12-05T12:17:11Z

I believe this is vite and @vitejs/plugin-vue behaviour. It's a bit complicated, but you can do this with import.meta.glob:
stackblitz.com/edit/github-pq8nym-aoavsh
<template>
  <img :src="images[dynamic_image_name]" alt="Discover Nuxt 3" />
</template>
<script setup lang="ts">
import { filename } from 'pathe/utils';

const glob = import.meta.glob('~/assets/*.svg', { eager: true });
const images = Object.fromEntries(
  Object.entries(glob).map(([key, value]) => [filename(key), value.default])
);

const dynamic_image_name = 'zero-config';
</script>
Can someone explain this solution a little ? What is the point of this import ? import { filename } from 'pathe/utils';

The idea is to remove the filenames from the key so you don't have to write /assets/... there

manniL · 2022-12-05T13:02:16Z

Also FYI, there is another caveat - when a buildAssetDir is set that is called /assets/ , the approach above will break.

Seanitzel · 2022-12-12T08:16:51Z

Another way to do it is just use regular imports:

<template>
  <img :src="img.default" alt="Discover Nuxt 3" />
</template>
<script setup lang="ts">
const img = await import(`~/assets/${fileName}.svg`);
</script>

mbadr2200 · 2022-12-16T17:54:47Z

i use this technique and it works with me just fine

new URL(`../assets/images/${props.image}`,import.meta.url).href

antoinezanardi · 2022-12-22T11:37:11Z

I created a temporary composable function while waiting for an official solution.

It uses the above solution with good types as much as possible (I didn't succeed to have the correct Module returned by import.meta.glob function).

import { filename } from "pathe/utils";
import { computed } from "#build/imports";

interface ImagesComposable {
  getImageSrc: (fileName: string) => string | undefined;
}

function useImages(): ImagesComposable {
  // TODO : replace the first parameter of the glob function according to your needs, I needed to import only png and jpeg from the images directory.
  const images = computed(() => import.meta.glob("~/assets/images/*.(png|jpeg)", { eager: true }));

  const getImageSrc = (fileName: string): string | undefined => {
    for (const path in images.value) {
      if (Object.hasOwn(images.value, path)) {
        // unknown type is required here to change the final type as typescript thinks that images.value[path] is a function, it is not.
        const image: unknown = images.value[path];
        const imagePath = (image as { default: string }).default;
        if (filename(imagePath) === filename(fileName)) {
          return imagePath;
        }
      }
    }
    return undefined;
  };
  return { getImageSrc };
}

export { useImages };

// USAGE => const src = getImageSrc("test.png")

luksak · 2022-12-23T03:21:22Z

Is this the only way to get dynamic images in Nuxt 3? Was super easy in Nuxt 2 with require.

I am also looking for something similar to require. In Nuxt 2 I used this to get the dimensions of an image, which was super useful:

export default {
  computed: {
    imageDimensions() {
      const image = require(`~/static/img/${this.src}`);
      return {
        width: image.width,
        height: image.height,
      }
    },
  },
}

sami-baadarani · 2022-12-29T10:25:35Z

I managed to solve this by returning a new URL using a computed function.

Store the path for your image in imagePath ref.

<script setup>
  const imgUrl = computed(() => {
    return new URL(imagePath.value, import.meta.url).href;
  });
</script>

<template>
  <img :src="imgUrl" />
<template/>

For more details check https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

tuxsisir · 2022-12-30T15:03:26Z

I managed to solve this by returning a new URL using a computed function.

Store the path for your image in imagePath ref.
<script setup>
  const imgUrl = computed(() => {
    return new URL(imagePath.value, import.meta.url).href;
  });
</script>

<template>
  <img :src="imgUrl" />
<template/>
For more details check https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url

@sami-baadarani Thanks for providing the vite link for more details. Something to keep in mind with this approach: from the docs it states that:

Does not work with SSR

This pattern does not work if you are using Vite for Server-Side Rendering, because import.meta.url have different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time.

JBildstein · 2023-01-15T23:55:58Z

The solution from @antoinezanardi worked well for me (thank you!) but only in dev.
With generate the path gets a hash appended to the filename so the files aren't found anymore.

So to make it work in both dev and prod I had to change the condition from

if (filename(imagePath) === filename(fileName))

to

const regex = new RegExp('^' + filename(fileName) + '(?:\\.[a-zA-Z0-9]+)?$');
if (regex.test(filename(imagePath)))

You have to be a bit careful if your filenames contain a period though, there is a chance it'll get mistakenly matched.
And if for some reason the hash gets appended differently this'll break as well, so it's really just a workaround.

shamscorner · 2023-01-17T21:30:17Z

This works for me.

// ImageView.vue

<script setup lang="ts">
const props = defineProps<{
  src: string;
  alt: string;
}>();

function getImageUrl(path: string) {
  const pathArr = path.split('.');
  if (pathArr.length < 2) return undefined;

  const url = `../assets/images${pathArr[0]}.${pathArr[1]}`;  // change the path

  return new URL(url, import.meta.url).href;
}
</script>

<template>
  <img :src="getImageUrl(props.src)" :alt="props.alt" />
</template>

Use like below:

<ImageView
   :src="`/carriers/${carrier}.svg`"  // provide the path excluding initial
   :alt="carrier"
   class="h-6 w-6 flex-shrink-0 rounded-full"
/>

miumerfarooq · 2023-01-23T08:23:47Z

For dynamic image use this

Note: define your directory properly, my image are saved in images folder.

It work for me :)

manniL · 2023-01-23T09:55:26Z

@Umer-Farooq10 this will break in prod

saslavik · 2023-01-26T15:58:16Z

I can't explain why, but this fn not working

const getImg = (img) => {
return new URL('./../assets/images/useful/' + img + '.png', import.meta.url).href
}

and this one is working for me O_o :

const getImg = (img) => {
const link = './../assets/images/useful/' + img + '.png'
return new URL(link, import.meta.url).href
}

IJsLauw · 2023-07-25T11:22:51Z

I'd like to try out your code, but got stuck somehow.

import.meta.glob('#nuxt-layer-base/assets/images/**/*.(png|jpeg|svg)', { eager: true }

This part has me stumped. When I try this all I get is an error like this:

[plugin:vite:import-glob] Invalid glob: "#nuxt-layer-base/assets/images/**/*.(png|jpeg|svg)" (resolved: "#nuxt-layer-base/assets/images/**/*.(png|jpeg|svg)"). It must start with '/' or './' .... /composables/assets.ts

Any thoughts on that @szulcus ?

szulcus · 2023-07-25T14:34:42Z

@IJsLauw #nuxt-layer-base is an alias for my nuxt layer. If you don't need to use layer, you can simply use ~ (alias for project root).

lionel-addvanto · 2023-08-02T13:33:35Z

is there any update on this? Anything official from the Nuxt team maybe? @danielroe?

matias-gmg · 2023-08-03T00:59:39Z

Also interested in how to address this.

3aluw · 2023-08-09T18:11:38Z

Is it fair to say that using Public folder is the best solution right now ?

matias-gmg · 2023-08-10T00:14:34Z

I solved it by using the following code:

<template>
  <span class="svg-icon-ctr" :class="[name, cls]" v-html="icon"></span>
</template>

<script setup>
const props = defineProps({
  name: { type: String },
  cls: { type: String, default: "" },
});

// Auto-load icons
const icons = Object.fromEntries(
  Object.entries(import.meta.glob("~/assets/svg/*.svg", { as: "raw" })).map(
    ([key, value]) => {
      const filename = key.split("/").pop().split(".").shift();
      return [filename, value];
    }
  )
);

// Lazily load the icon
const icon = props.name && (await icons?.[props.name]?.());
</script>

For reference, in Nuxt 2 this component worked like this:

<template>
  <span class="svg-icon-ctr" :class="[name, cls]" v-html="require(`~/assets/svg/${name}.svg?raw`)"></span>
</template>

<script>
  export default {
    props: {
      name: { type: String },
      cls: { type: String, default: "" },
    }
  };
</script>

3aluw · 2023-08-10T08:13:07Z

I solved it by using the following code:

<script setup>
// Auto-load icons
const icons = Object.fromEntries(
  Object.entries(import.meta.glob("~/assets/svg/*.svg", { as: "raw" })).map(
..........
  )
);

// Lazily load the icon
const icon = props.name && (await icons?.[props.name]?.());
</script>

Sounds interesting.
From a performance perspective,
is it more advantageous to import all the files and load them lazily, or simply use the public folder?

matias-gmg · 2023-08-29T01:52:43Z

Sounds interesting. From a performance perspective, is it more advantageous to import all the files and load them lazily, or simply use the public folder?

I am not sure to be honest... Maybe someone from the team can clarify this?

danielroe · 2023-08-29T06:18:34Z

If your files don't change in content, it is more performant (and a better decision, I think) to add them to the public folder.

bitbytebit1 · 2023-09-11T12:25:11Z

Finding it really frustrating to work with images, this needs to be properly addressed in the documentation: making it very clear that it is not possible to using images with dynamic names unless import.meta.glob is used.

netopolit · 2023-09-12T00:03:21Z

Finding it really frustrating to work with images, this needs to be properly addressed in the documentation: making it very clear that it is not possible to using images with dynamic names unless import.meta.glob is used.

This is partially documented in the Vite guide, but I agree it should also be clarified in Nuxt docs.

I also believe this is a Vite limitation, and the issue should be raised in vitejs/vite repository. Please correct me if I'm wrong.

manniL · 2023-10-11T14:18:52Z

I've written a blog post about that topic recently, but the easiest way would be using the public folder unless you have a good reason not to. In this case, using the import.meta.glob solution from Daniel would be the best way. But loading assets that way is less performant than via public folder.

shrpne · 2023-10-12T13:55:41Z

It is very sad, that the best solution for using dynamic assets with Vite is not to use dynamic assets. After years with Webpack, optimizing images by the bundler seems like a basic task, but not with Vite

shrpne · 2023-10-12T14:03:08Z

@netopolit

I also believe this is a Vite limitation, and the issue should be raised in vitejs/vite repository. Please correct me if I'm wrong.

Yes, but the Vite team closes such issues since this limitation is "by design". You should have significant weight in the community to be heard by Vite team

maltseva-k · 2023-10-16T10:50:47Z

Hi!
You can use src without '~/assets' if your remove image from assets to public directory
<img :src="/${dynamic_image_name}" alt="Discover Nuxt 3" />
It works for me :)
try it too

BorisKamp · 2023-12-07T09:12:24Z

I have a set of country flag icons in my /public/country-flags folder. When I set the SRC like this:

<img v-if="agent.attributes?.country_iso" :src="`/country-flags/${agent.attributes.country_iso}.svg`" class="h-6 w-6 me-2">

It does work when running local, however, when running on prod, the images return a 404, here's the rendered element on prod:
<img src="/country-flags/NL.svg" class="h-6 w-6 me-2">
It shows this error in the console: GET https://my.todayslogistics.nl/country-flags/NL.svg 404 (Not Found)

For images in the same /public folder that I set the SRC non-dynamic, the image loads, heres the rendered element on prod:
<img class="h-8 w-auto" src="/logo-white.svg" alt="Todays logo">

I have no clue how to fix this, I can't be the only one with this problem.

joelee1992 · 2023-12-13T18:11:03Z

I assume there is no solution to this issue, even after attempting to use a new new URL(link, import.meta.url).href which only works locally but not in the production environment

manniL · 2023-12-14T08:20:48Z

@joelee1992 There is, as Daniel pointed out in #14766 (comment) 😊

BorisKamp · 2023-12-14T08:34:27Z

@joelee1992 There is, as Daniel pointed out in #14766 (comment) 😊

So the workaround is to move the files to the assets folder and use Daniels solution?

manniL · 2023-12-14T09:19:21Z

So the workaround is to move the files to the assets folder and use Daniels solution?

@BorisKamp Well, you have two options (also explained here):

Use the public folder (recommended and easier)
Or use the assets folder + use the solution daniel provided if necessary

BorisKamp · 2023-12-14T14:49:44Z

So the workaround is to move the files to the assets folder and use Daniels solution?

@BorisKamp Well, you have two options (also explained here):

Use the public folder (recommended and easier)

Or use the assets folder + use the solution daniel provided if necessary

Thank you for your reply but that's the whole point: I am using the public folder, see my comment up here

manniL · 2023-12-14T17:38:43Z

@BorisKamp Sorry, didn't see it was linked to the comment above. Do you have a minimal reproduction? Public folder should work in any case, no matter if referenced in the app or not 🤔

BorisKamp · 2023-12-18T19:54:37Z

@BorisKamp Sorry, didn't see it was linked to the comment above. Do you have a minimal reproduction? Public folder should work in any case, no matter if referenced in the app or not 🤔

@manniL no problem man! Hmm do you know if I can reproduce a production environment locally? As my issue describes, this is only happening once deployed, with dynamic filename generation. I can verify that with static filename specification this does not happen.

megaarmos · 2023-12-29T02:47:18Z

I think i just found an easy solution for this problem. I used <NuxtImg> for dynamic images. It worked both during development and in my production build

Note

<NuxtImg> by default looks up files in public directory, in my case directory looked like this public > images

<NuxtImg :src="'images/' + yourImage" />

CreativeWarlock · 2024-02-23T14:07:44Z

This one works like a charm (from https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/ ):

<script setup lang="ts">
import { filename } from 'pathe/utils'
const dogNames = ['Riley', 'Annie', 'Marvin'];
const selectedDog = ref('');

const glob = import.meta.glob('@/assets/doggos/*.jpg', { eager: true })
const images = Object.fromEntries(
  Object.entries(glob).map(([key, value]) => [filename(key), value.default])
)
</script>

<template>
  <div>
    <label v-for="doggo in dogNames" :key="doggo" style="margin-right: 2rem">
      <input type="radio" :value="doggo" v-model="selectedDog" />
      {{ doggo }}
    </label>
    <img
      :src="images[`${selectedDog.toLowerCase()}`]"
      width="500"
      :alt="selectedDog"
    />
  </div>
</template>

tobiasdiez added the pending triage label Aug 31, 2022

tobiasdiez mentioned this issue Aug 31, 2022

[doc] Add how to use assets with dynamic names nuxt/framework#6635

Closed

7 tasks

danielroe added documentation and removed pending triage labels Sep 15, 2022 — with Volta.net

danielroe mentioned this issue Oct 22, 2022

require is not defined #12797

Closed

tobiasdiez mentioned this issue Jan 19, 2023

Dynamic images in Nuxt 3 #15561

Closed

4 tasks

manniL added the dx label Dec 4, 2022

danielroe added the 3.x label Jan 19, 2023

danielroe transferred this issue from nuxt/framework Jan 19, 2023

danielroe mentioned this issue Aug 3, 2023

Nuxt 3 video.js support #22462

Closed

This comment was marked as off-topic.

Sign in to view

warflash mentioned this issue Oct 10, 2023

Path alias do not work with v-bind #23606

Closed

This comment was marked as off-topic.

Sign in to view

juancampuzano mentioned this issue Oct 23, 2023

Nuxt 3.6.5: Build fails if any asset link is dynamically imported from a function in the utils folder when there's a CSS file that starts with "@" #22427

Open

Assets with dynamic names are not resolved #14766

Assets with dynamic names are not resolved #14766

Comments

tobiasdiez commented Aug 31, 2022

Environment

Reproduction

Describe the bug

Additional context

Logs

danielroe commented Sep 15, 2022

tobiasdiez commented Sep 15, 2022

danielroe commented Sep 15, 2022

mattyleggy commented Sep 24, 2022

jamiecarter7 commented Oct 28, 2022

wangrongding commented Nov 10, 2022

3aluw commented Nov 11, 2022 • edited

manniL commented Dec 4, 2022

manniL commented Dec 5, 2022

manniL commented Dec 5, 2022

Seanitzel commented Dec 12, 2022

mbadr2200 commented Dec 16, 2022 • edited

antoinezanardi commented Dec 22, 2022 • edited

luksak commented Dec 23, 2022

sami-baadarani commented Dec 29, 2022

tuxsisir commented Dec 30, 2022

JBildstein commented Jan 15, 2023

shamscorner commented Jan 17, 2023 • edited

miumerfarooq commented Jan 23, 2023

manniL commented Jan 23, 2023

saslavik commented Jan 26, 2023 • edited

IJsLauw commented Jul 25, 2023

szulcus commented Jul 25, 2023

lionel-addvanto commented Aug 2, 2023

matias-gmg commented Aug 3, 2023

3aluw commented Aug 9, 2023

matias-gmg commented Aug 10, 2023 • edited

3aluw commented Aug 10, 2023 • edited

matias-gmg commented Aug 29, 2023

danielroe commented Aug 29, 2023

bitbytebit1 commented Sep 11, 2023

netopolit commented Sep 12, 2023 • edited

This comment was marked as off-topic.

This comment was marked as off-topic.

manniL commented Oct 11, 2023

shrpne commented Oct 12, 2023

shrpne commented Oct 12, 2023

maltseva-k commented Oct 16, 2023 • edited

BorisKamp commented Dec 7, 2023 • edited

joelee1992 commented Dec 13, 2023

manniL commented Dec 14, 2023

BorisKamp commented Dec 14, 2023

manniL commented Dec 14, 2023

BorisKamp commented Dec 14, 2023

manniL commented Dec 14, 2023

BorisKamp commented Dec 18, 2023

megaarmos commented Dec 29, 2023 • edited

CreativeWarlock commented Feb 23, 2024 • edited

3aluw commented Nov 11, 2022 •

edited

mbadr2200 commented Dec 16, 2022 •

edited

antoinezanardi commented Dec 22, 2022 •

edited

shamscorner commented Jan 17, 2023 •

edited

saslavik commented Jan 26, 2023 •

edited

matias-gmg commented Aug 10, 2023 •

edited

3aluw commented Aug 10, 2023 •

edited

netopolit commented Sep 12, 2023 •

edited

maltseva-k commented Oct 16, 2023 •

edited

BorisKamp commented Dec 7, 2023 •

edited

megaarmos commented Dec 29, 2023 •

edited

CreativeWarlock commented Feb 23, 2024 •

edited