CODEWITHSUNDEEP
htmlcssvue.jsvuejs2vue-component
zeldakiller
zeldakiller

Reputation: 15

Vue - i am trying to display an image from a url from an array but the image is not displaying

this is one of my first projects with vue.

Basically, I am trying to display an image from a URL from an array. On the webpage, the URL is in the image back but the actual image is not displaying.

This is in my main vue class

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

then the script code:

<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

I have declared a width and a height of the image as well with css

I should mention i getting the information from the database in a node project and connecting by a port number

I am pretty new to stack so I would love any feedback, cheers

Upvotes: 1

Views: 326

Answers (1)

Azhar Khattak
Azhar Khattak

Reputation: 875

From you screenshot code, this looks fine. I can see the image by writing similar 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/

Try clearing your cache or reload the page by Holding the Ctrl key and press the F5 key.

Thanks!

Upvotes: 1

Related Questions