Vue - ich versuche, ein Bild von einer URL aus einem Array anzuzeigen, aber das Bild zeigt nicht

Question

Dies ist eines meiner ersten Projekte mit Vue.

Grundsätzlich versuche ich ein Bild von einer URL aus einem Array anzuzeigen. Auf der Webseite befindet sich die URL im Bild, aber das eigentliche Bild wird nicht angezeigt.

Dies ist in meinem Haupt-vue Klasse

<div id="painting"> 
    <ul v-if="artwork && artwork.length"> 
     <li v-for='(artworks, index) in artwork' :key='index'> 
      <img v-bind:src="artworks.thumbnailUrl" /> 
     </li> 
    </ul> 
    <router-view/> 
    </div> 

dann der Skriptcode:

<script> 
    import axios from 'axios'; 

    export default { 
    data() { 
    return { 
     artwork: [] 
     } 
    }, 

    created() { 
    axios.get(`http://localhost:9000/artwork`) 
     .then(response => { 
      this.artwork = response.data; 
     }) 
     .catch(e => { 
      this.errors.push(e) 
     }) 
    } 
    } 
</script> 

This is what it looks like on the web, the url is there but no picture

ich eine Breite und eine Höhe des Bildes erklärt haben, als auch mit CSS

Ich sollte erwähnen, ich bekomme die Informationen aus die Datenbank in einem Knoten Projekt und durch eine Portnummer verbindet

ich ziemlich neu bin zu stapeln, so würde ich jedes Feedback lieben, prost

Answer 1

Von Ihnen Code Screenshot, das sieht gut aus. Ich kann das Bild sieht durch ähnliche Schreiben von HTML

<li> 
<img data-v-xcxcc src="http://www.tate.org.uk/art/images/work/A/A00/A00007_8.jpg" /> 
</li> 

https://jsfiddle.net/y2m75usk/

Versuchen Sie Ihren Cache zu löschen oder die Seite durch Drücken der Strg-Taste neu zu laden und die F5-Taste drücken.

Danke!