html - Vue - 我正在尝试显示来自数组 url 的图像，但图像未显示

Question

这是我使用 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 声明了图像的宽度和高度

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

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

Answer 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 键重新加载页面。

谢谢!