Assets with dynamic names are not resolved

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 https://github.com/nuxt/framework/pull/6635.

Logs

No response

[mattyleggy]

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

[wangrongding]

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