Vue - 我正在尝试从数组中的 url 显示图像，但图像未显示答案

【问题标题】：Vue - i am trying to display an image from a url from an array but the image is not displayingVue - 我正在尝试从数组中的 url 显示图像，但图像未显示
【发布时间】：2018-05-13 05:54:08
【问题描述】：

这是我第一个使用 vue 的项目。

基本上，我正在尝试从数组中的 URL 显示图像。在网页上，网址在图片后面，但实际图片没有显示。

这是在我的主 vue 类中

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

然后是脚本代码：

<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

我已经用 css 声明了图像的宽度和高度

我应该提到我从节点项目中的数据库获取信息并通过端口号连接

我是个新手，所以我希望得到任何反馈，干杯

【问题讨论】：

标签： html css vue.js vuejs2 vue-component

【解决方案1】：

从你的截图代码来看，这看起来不错。我可以通过编写类似的 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/

尝试清除缓存或通过按住 Ctrl 键并按 F5 键重新加载页面。

谢谢！

【讨论】：