Question

这是我的第一个vue项目之一。

基本上，我试图从数组中显示来自URL的图像。在网页上，URL在图像中，但实际图像未显示。

这是我的主要类别

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

谢谢！

Vue - 我试图从数组中显示来自URL的图像，但图像没有显示

1 个答案: