Vue components cannot reference images in public folder

[ffxsam]

Astro Info

Astro                    v4.0.1
Node                     v18.16.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/vue

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

References images in /public seems to be broken in Vue components:

<template>
  <div>
    <img src="/favicon.svg" />
  </div>
</template>

What's the expected result?

I'd expect to see an image displayed. This works in Astro 2.x, and it works in an .astro component in 4.x.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-njmj9o

Participation

• I am willing to submit a pull request for this issue.

[Princesseuh]

There seems to be a bug in the Vue Vite plugin causing the related setting to not work properly.

A bit of a clunky workaround in the meantime:

import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

// https://astro.build/config
export default defineConfig({
  integrations: [
    vue({
      template: {
        transformAssetUrls: {
          includeAbsolute: false,
        },
      },
    }),
  ],
});

You might get a type error with this, but it should work, at least!

[yoyo837]

Same here.

When the assets/img/yhfootball/tips.png image exists in the public folder and is referenced using <img src="/assets/img/yhfootball/tips.png" />, it reports this error:

[ImageNotFound] Could not load vite:asset:public/assets/img/yhfootball/tips.png (imported by src/pages/yhfootball/index.vue): Could not find requested image `vite:asset:public/assets/img/yhfootball/tips.png`. Does it exist?
  Hint:
    This is often caused by a typo in the image path. Please make sure the file exists, and is spelled correctly.
  Error reference:
    https://docs.astro.build/en/reference/errors/image-not-found/

[marsidev]

Another workaround that worked for me was change <img src="/path/to/img.webp" /> to <img :src="'/path/to/img.webp'" />