从 Object as src 链接到 img 标签

Posted 2023-02-22

【中文标题】从 Object as src 链接到 img 标签

【英文标题】：Link from Object as src to img tag

【发布时间】：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....."吗？

【参考方案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