Vue 如何正确绑定 src 与 API 的输出

Posted 2023-02-23

【中文标题】Vue 如何正确绑定 src 与 API 的输出

【英文标题】：Vue How to properly bind src with output from API

【发布时间】：2021-06-24 08:05:54

【问题描述】：

我正在使用 vue 创建一个电影数据库应用程序，并且我正在尝试输出从 API 获取的图像源。由于某种原因，src 的输出没有按照应用程序中应有的方式呈现。它打印字符串 movie.Poster。 我显然没有以正确的方式使用 v-bind。那么关于如何以正确的方式打印到海报的路径有什么想法吗？

<template>
  <div class="my-10">
    <h2 class="text-bold"> movie.Title </h2>
    <img v-bind:src="'movie.Poster'"/>
  </div>
</template>

【问题讨论】：

***.com/questions/45880956/…

v-bind:src="movie.Poster" 或 :src="movie.Poster"

【参考方案1】：

你需要使用

<img :src="movie.Poster"/>

因为 .. 是模板文字。所以它输出一个字符串。

【讨论】：

没有比我看到的更难谢谢！