Die dynamische Bildanzeigefunktion von Vue.j schlägt fehl
P粉216807924
P粉216807924 2023-08-20 11:03:39
0
1
498

Ich bin ein Anfänger mit vue.js und versuche, Bilder dynamisch anzuzeigen, habe aber Probleme mit der dynamischen Anzeige. Wenn ich sie manuell ändere, funktionieren sie einwandfrei. Ich habe viele ähnliche Fragen mit einigen Unterschieden gefunden, aber keine davon hat mir geholfen.

Das ist meine Struktur:

-src --Vermögenswerte ---Pizza ----pizza-1.jpg ----pizza-2.jpg ---Hamburger ----hamburger-1.jpg ----hamburger-2.jpg ---Pommes frites ----pommes-frites-1.jpg ----pommes-frites-2.jpg --components --DBjson ---main.json

Ich versuche diese Schleife zu erstellen:

`
Standard exportieren { Name: „Restaurant“, Daten() { zurückkehren { restInfo: this.$attrs.restData, }; }, Methoden: { getImage(folderName, imageName) { let image = require.context("@/assets/"); return image("./" + Ordnername + "/" + Bildname); }, }, };`

Meine JSON-Datei:

{ „id“: 1, „Name“: „Pizza“, „Preis“: „10 $“, „mainImage“: „pizza-1.jpg“, „Bilder“: [„pizza-2.jpg“, „pizza-1.jpg“], },
P粉216807924
P粉216807924

Antworte allen (1)
P粉798343415

getImage应该使用图像的完整相对文件路径来要求并返回图像

Vue 2.x

getImage(folderName, imageName) { return require(`@/assets/${folderName}/${imageName}`) }

Vue 3.x + Vite

据我所知,Vite无法处理'@'别名用于此特定任务,所以请确保根据需要设置您的路径

getImage(folderName, imageName) { return new URL(`../assets/${folderName}/${imageName}`, import.meta.url).href; }
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!