vue-instagram ：图像显示为图标，即使 src/url 是正确的答案

【问题标题】：vue-instagram : images showing as icons, even though src/url is correctvue-instagram ：图像显示为图标，即使 src/url 是正确的
【发布时间】：2019-02-12 23:37:25
【问题描述】：

我正在使用 vue-instagram 组件来显示来自我自己的 instagram 帐户的图像.. url 是正确的（当我检查元素并在新选项卡中打开 url 时，图像会显示出来......），但它只显示为一个图标（见下图）..

这是我的代码：（来自示例的样板）：

<template>
<vue-instagram token="209161622.1677ed0.cd18b9a41f0c4a53b646b8f012f465ab" :count="5" mediaType="image">
    <template slot="feeds" slot-scope="props">
        <!-- <li class="fancy-list"> {{ props.feed.link }} </li> -->
        <img :src="props.feed.link" />

    </template>
    <template slot="error" slot-scope="props">
        <div class="fancy-alert"> {{ props.error.error_message }} </div>
    </template>
</vue-instagram>

import VueInstagram from 'vue-instagram'

export default {
components: {
    VueInstagram,
    }
}
</script>

如下图所示，它只显示图标，不显示图片本身：

这是呈现的 HTML：

知道我在这里做错了什么吗？

【问题讨论】：

您的网址不是图片，而是 HTML 页面。
@Phil：你使用过这个插件并且知道它的行为吗？这件事一直在质疑我的逻辑:)
不，但我怀疑它允许您链接到 Instagram 帖子，而不是直接链接到图像。从简短的研究来看，Instagram 似乎并没有特别容易获得直接的图片 URL
我在您的 vue-devtools 屏幕截图中看到，有一个对象调用 images。里面是什么？
马上检查一下.. 嗯。 vue-instagram 的作者似乎没有添加他正在使用的 css.. 这可能是这里的问题.. dooh

标签： vue.js vuejs2 vue-component instagram-api

【解决方案1】：

您的链接指向帖子（HTML 页面），而不是直接指向图片，因此它们无法显示为图片。

窥探component's Github page，看来你想要

<img :src="props.feed.images.low_resolution.url" alt="Image">

【讨论】：