时间戳

首页 > 解决方案 > vue-instagram ：图像显示为图标，即使 src/url 是正确的

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

问题描述

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

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

<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： 在此处输入图像描述

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

标签： vue.jsvuejs2vue-componentinstagram-api

解决方案

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

通过窥探组件的 Github 页面，您似乎想要

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

推荐阅读