Question

我正在创建一个简单的网络应用，它采用一个JSON文件，其中包含存储在我的文件夹中的6个图像的网址。

这是文件：https://api.myjson.com/bins/t3ri9我希望它使用vue js的vue-bind：src来附加每个图像的每个url，以便它们可以显示在浏览器上。这是代码：

<template>
    <div id="main">
      <br/><br/>
      <h2>Here is a list of all your image</h2>
      <br><br>
      <div id="images">
        <div class="image" v-for="image in pod">
          <img v-bind:src="image.url"/>
        </div>
      </div>
    </div>
    </template>

    <script>
        export default {
            name: "wall",
          data() {
              pod: []
          },
          created() {

this.$http.get('https://api.myjson.com/bins/t3ri9').then(function (data) {
                this.pod=data.body;
                console.log(this.pod);
              });
          }
        }
    </script>

    <style scoped>

    </style>

然而，当我在本地主机上运行项目时，即使我在控制台上正确传递了图像的网址，它也不会显示图像。

Answer 1

回调中的

this与外部（created() {）不一样使用fat-arrow函数从外部保留this：

this.$http.get('https://api.myjson.com/bins/t3ri9').then((data) => {
                this.pod=data.body;
                console.log(this.pod);
              });

Answer 2

尝试一下

v-bind：src =“ require（'image.url'）”

我猜想webpack没有添加您的本地图片？

也许可以尝试使用图像的远程位置。

http：// ...

javascript-Vue src绑定不显示图像

2 个答案: