javascript-Vue src 绑定不显示图像答案

【问题标题】：javascript-Vue src binding not displaying the imagesjavascript-Vue src 绑定不显示图像
【发布时间】：2018-02-06 21:09:21
【问题描述】：

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

这是文件：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>

但是，当我在本地主机上运行项目时，它不会显示图像，即使当我对控制台执行此操作时，它正确地传递了图像的 url。

【问题讨论】：

标签： image binding vue.js

【解决方案1】：

回调内部的this 与外部不同（在created() { 中）。
使用胖箭头函数从外部保留this：

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

【讨论】：

数据被正确接收并存储在 pod 数组中并不重要。我可以在
标记中打印出图像 url。

【解决方案2】：

试试这个

v-bind:src="require('image.url')"

我猜你的本地图片不是 webpack 添加的？

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

http://...

【讨论】：