Vue.js Vermögenswerte Filepath wenn v-für die Verwendung von

Question

Ich habe mit Vue.js gerade erst begonnen, es ist einfach genug, die Vermögenswerte Ordner zugreifen, wenn eine statische img wie mein Logo Laden:

<img src="../assets/logo.png"> 

aber ich sind mit v-für auf mehrere Listenelemente mit Beispieldaten zu erstellen, dies ist meine Vorlage:

<ul> 
    <li v-for="item in items" :key="item.id"> 
     <img v-bind:src="item.img" v-bind:alt="item.title"> 
     <h2 class="md-title">{{item.title}}</h2> 
    </li> 
</ul> 

und dies ist die Probendaten innerhalb derselben .vue Datei deklarieren:

export default { 
    name: 'front', 
    data() { 
    return { 
     items: [ 
     {title: 'Google Pixel', img: '../assets/pixel.png', id: 1}, 
     {title: 'Samsung Galaxy S8', img: '../assets/s8.png', id: 2}, 
     {title: 'iPhone 7', img: '../assets/iphone.png', id: 3} 
     ] 
    } 
    } 
} 

Mein Problem ist, dass die imgs alle 404 seltsam scheint, da der gleiche Pfad auf statischen Imgs funktioniert. Wenn ich einen absoluten Pfad wie diese verwenden funktioniert es

https://media.carphonewarehouse.com/is/image/cpw2/pixelBLACK?$xl-standard$ 

durch die Dokumentation sah Nachdem ich diese https://vuejs-templates.github.io/webpack/static.html gefunden

Was es erklären könnte, aber ich habe jede Methode versucht, ohne Erfolg vorgeschlagen:

Vermögens Resolving Regeln

• Relative URLs, z.B. ./assets/logo.png wird als Modulabhängigkeit interpretiert. Sie werden anhand Ihrer Webpack-Ausgabekonfiguration durch eine automatisch generierte URL ersetzt.

• Nicht vorangestellte URLs, z.B. assets/logo.png wird wie die entsprechenden URLs behandelt und in ./assets/logo.png übersetzt.

• URLs, denen ~ vorangestellt ist, werden als Modulanforderung behandelt, ähnlich wie require ('some-modul/image.png'). Sie müssen dieses Präfix verwenden, wenn Sie die Modulauflösungskonfigurationen von Webpack nutzen möchten. Wenn Sie beispielsweise einen Alias ​​für die Auflösung von Assets haben, müssen Sie sicherstellen, dass der Alias ​​eingehalten wird.

• Stammrelative URLs, z. /assets/logo.png werden überhaupt nicht verarbeitet.

ist dies ein Problem mit webpack statt vue? Es erscheint verrückt, dass eine Bibliothek, die so einfach zu benutzen ist, so etwas wie Dateipfade komplex machen würde.

Answer 1

Ich stelle diese Frage auf Vue.js' Forum und Linus Borg bekam mit der Antwort zurück zu mir:

nur Diese Erläuterungen zu Asset-Pfaden in HTML oder CSS verwendet werden, beziehen. In diesen können die jeweiligen Webpack-Loader diese Pfade erkennen und verwalten.

Aber wenn Sie Pfade in Ihrem Javascript haben, kann Webpack nicht schließen, dass diese Zeichenfolgen als Pfade behandelt werden sollen (es kann Ihr Programm nicht "verstehen" und sehen, dass diese Zeichenfolgen später in HTML verwendet werden) um webpack explizit zu sagen, dass diese Zeichenfolgen tatsächlich Pfade zu Abhängigkeiten sind, indem require() verwendet wird.

export default { 
    name: 'front', 
    data() { 
    return { 
     items: [ 
     {title: 'Google Pixel', img: require('../assets/pixel.png'), id: 1}, 
     {title: 'Samsung Galaxy S8', img: require('../assets/s8.png'), id: 2}, 
     {title: 'iPhone 7', img: require('../assets/iphone.png'), id: 3} 
     ] 
    } 
    } 
}