suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Die dynamische Bildanzeigefunktion von Vue.j schlägt fehl

<p>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. </p> <p>Das ist meine Struktur: </p> <pre class="brush:php;toolbar:false;">-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</pre> <p>Ich versuche diese Schleife zu erstellen: </p> <pre class="brush:php;toolbar:false;">`<div class="holder" v-for="restaurant in Restaurants"> <img :src="getImage(restaurant.name, restaurant.mainImage)"/> </div> Standard exportieren { Name: „Restaurant“, Daten() { zurückkehren { restInfo: this.$attrs.restData, }; }, Methoden: { getImage(folderName, imageName) { let image = require.context("@/assets/"); return image("./" + Ordnername + "/" + Bildname); }, }, };`</pre> <p>Meine JSON-Datei:</p> <pre class="brush:php;toolbar:false;">{ „id“: 1, „Name“: „Pizza“, „Preis“: „10 $“, „mainImage“: „pizza-1.jpg“, „Bilder“: [„pizza-2.jpg“, „pizza-1.jpg“], },</pre>
P粉216807924P粉216807924491 Tage vor592

Antworte allen(1)Ich werde antworten

  • P粉798343415

    P粉7983434152023-08-21 00:19:41

    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;
    }
    

    Antwort
    0
  • StornierenAntwort