从 Object as src 链接到 img 标签答案

【问题标题】：Link from Object as src to img tag从 Object as src 链接到 img 标签
【发布时间】：2021-04-08 10:47:12
【问题描述】：

我想从 Object 中传递信息（链接），并将其作为图像的 src。不知何故标签看不到它。即使它控制台记录正确的链接并且链接正在运行。

对象

setup() {

const state = reactive({
  flashcardObject: {
  linkToGraphic: 'https://static.fajnyzwierzak.pl/media/uploads/media_image/auto/entry-content/785/mobile/dog-niemiecki.jpg'}
})


 return{
  state
 }
}

错误在哪里

<template>
  <div>
    <div class="ViewFlashcards">
      <div class="image_div">
        <img class="picture" src="{{state.flashcardObject.linkToGraphic}}"/>
      </div>
    </div>
  </div>
</template>

感谢您的帮助！

【问题讨论】：

不是:src="state....."吗？

标签： vue.js vuejs3

【解决方案1】：

如果图像存储在应用程序中，您应该要求它并使用: 将图像src 绑定到所需的路径：

<img class="picture" :src="require(state.flashcardObject.linkToGraphic)"/>

或：

  <img class="picture" :src="state.flashcardObject.linkToGraphic"/>

如果图像是在线托管的。

【讨论】：

【解决方案2】：

使用v-bind，像这样：

<img v-bind:src="state.flashcardObject.linkToGraphic" class="picture"/>

完整代码：

<template>
  <div>
    <div class="ViewFlashcards">
      <div class="image_div">
        <img class="picture" v-bind:src="state.flashcardObject.linkToGraphic"/>
      </div>
    </div>
  </div>
</template>

v-bind 允许您将 (HTML) 属性绑定到数据属性或只是一些 JS 代码。在这种情况下，您只需将图像 URL 传递给 <image> 的 src 属性。

请注意，小胡子语法{{ something }} 在 HTML 属性中不起作用；它只适用于元素，例如<p>{{ something }}</p>。

另外，请注意，您可以省略 v-bind 部分而不是 v-bind:attribute，而只保留冒号，如下所示：:attribute。这使得绑定属性更容易。

更多信息和例子see the docs

【讨论】：