Version

3.1.1

Reproduction link

Playground

Steps to reproduce

<template>
  <component :is="`tab`" />
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  setup() {
    return {};
  },
  components: {
    tab: defineAsyncComponent(
      () =>
        new Promise((resolve, reject) => {
          resolve({
            template: `<img class="h-12" src="@/assets/logo.png" alt="" />`,
          });
        })
    ),
  },
};
</script>

//vite.config.js

What is expected?

the image path is resolved in DOM according to the alias @ and the public path

What is actually happening?

the image path is not resolved in DOM based on the alias @ and the public path

Such aliases are a build time feature. They can not work in the runtime compiler because the compiler doesnt know about them - that's the build tool's job (here:vite)

Hint: you can import the image in JS and then insert the path you get from that import to your runtime template.

I suggest you use chat.vuejs.org to ask for more help.

@LinusBorg Hence, its should be a feature request for vite js or vue 3 js? It will be easier to write the code just like normal, without explicitly import each of the image path manually if i have 100 images in an array? Besides, require("imagepath") also did not work in runtime compiler.

I don't see a reason for a compiler feature here. This should be enough for most situations:

{
 template: `<img class="h-12" src="${img('./assets/logo.png')}" alt="" />`,
}

and define img() as a central helper function somewhere in your code.

If you want to continue arguing for such a feature, you should do so in our /rfc repository where feature requests can be discussed and then go through the RFC process.

@LinusBorg, Could you please clarify what can be in img() helper function? I couldn't see a way to resolve dynamic paths in either template or functions.

I don't see a reason for a compiler feature here. This should be enough for most situations:

{
 template: `<img class="h-12" src="${img('./assets/logo.png')}" alt="" />`,
}

and define img() as a central helper function somewhere in your code.

If you want to continue arguing for such a feature, you should do so in our /rfc repository where feature requests can be discussed and then go through the RFC process.