Jak wyświetlić obrazy w <v-img/>?

Cześć,
Mam problem w stacku Vite + Vuetify, w komponencie v-img, w sumie to każdym z importem. Generalnie problemu nie było odpalając projekt, ale jest jak już się zbuilduje, zdeployowałem i dopiero jest problem. Kombinacji użyłem już tysiąć, ale już nie ogarniam tego buildu webpacka.

Absolutne i relatywne ścieżki nie działają z componentami tj w v-img

<v-img src="./src/assets/images/logo1.png" width="100"  height="150" class="logoMenu"></v-img>
<v-img src="@/assets/images/logo1.png" width="100"  height="150" class="logoMenu"></v-img>
<v-img :src="'./src/assets/images/logo1.png'" width="100"  height="150" class="logoMenu"></v-img>

Mianowicie zdjęcia nie ładują się, tylko mam ich całkiem sporo, mam dużo fetchy więc powinny się ładować dynamicznie i chyba nie mogę używać sposoby z import na początku script setup.

Jeśli chodzi o require w :src no to nie działa w Vite.
Próbowałem coś z metodami:

useAssets2(asset) {
  const assets = import.meta.glob('/assets/**', {eager: true});

  const getAssetUrl2 = () => {
  if (assets[asset]) {
    return assets[asset].default
  }
  }

  return getAssetUrl2()
},
showImage(filename) { 
  return new URL(`./src/images/${filename}`, 
  import.meta.url)
}

template:

<v-img :src="showImage('logo1.png')" width="100"  height="150" class="logoMenu"></v-img>
<v-img :src="useAssets2('/assets/images/logo1.png')" width="100"  height="150" class="logoMenu"></v-img>

Mój plik vite:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
import vuetify from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
		vue(),
		vueJsx(),
		vuetify({ autoImport: true }),
	],
  base: '',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Testuje to w tym pliku:

A tu ścieżka zdjęcia:

W konsolce błąd że ścieżki złe:
, nie wiem jak mam podejść do tych ścieżek po buildzie, tj już wiem, że takie nie będą jak przed buildem.
Może ktoś ma jakieś rozwiązanie, byłbym wdzięczny na za pomoc, albo wskazówkę. Pozdrawiam.

Zdjęcie, które wstawiłeś jest z folderu src/, a jak wygląda folder z buildem, który generuje vite? (Zazwyczaj jest to katalog dist/)

Co do ścieżek to wydaje mi się, że taka wersja powinna być poprawna

relatywna

<img src="assets/images/logo1.png" alt="..." width="..." height="...">

oraz wykorzystująca alias

import { relative } from "node:path";

// ...
{
  resolve: {
    alias: {
      '@': relative('src'),
    },
  },
}
//...

<img src="@/assets/images/logo1.png" alt="..." width="..." height="...">

Cześć, dzięki serdecznie. Podeślę po pracy, ale chciałem tylko jedną uwage, że chodzi o komponent z vuetify - v-img a nie zwykły img, co jest istotne. Jeszcze dzisiaj wszedłem na docsy i jest jakaś mała szansa że nie mam tej paczki https://vuetifyjs.com/en/components/images/ vuetify-loader, ale to zweryfikuje.

Niestety, twoja metoda nie zadziałała, jest problem tylko z komponentem v-img, jeszcze poszukam rozwiązania bo chciałbym mieć ten komponent, najwyżej będę migrował na zwykły img:
To działa:
<img src="@/assets/images/logo1.png" alt="" width="100" height="150" class="logoMenu">
To NIE działa (vuetify component) (po buildzie, tak to normalnie działa jak się odpala):
<v-img src="@/assets/images/logo1.png" width="100" height="150" class="logoMenu"></v-img>
Używałem tego configu VITE co wyżej wstawiłem.
To folder: dist:

Problem rozwiązany, plik VITE:

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
		vue({
      template: { transformAssetUrls }
    }),
		vueJsx(),
		vuetify({ autoImport: true }),
	],
  base: '',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
      // '@2': relative('./src')
    }
  }
})

oraz ściężki trzeba podawać ze slashem na początku w komponentach vutefiy (w tym przypadku v-img na którym mi zależało):

<v-img src="/src/assets/images/logo1.png" width="100"  height="150" class="logoMenu disable-drag"></v-img>