Link 从 Object 作为 src 到 img 标签

Question

我想从对象传递信息 (link)，并将其作为图像的 src。不知何故标签看不到它。即使它控制台日志正确 link 并且 link 正在工作。

对象

setup() {

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


 return{
  state
 }
}

bug在哪里

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

感谢您的帮助！

Answer 1

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

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

或：

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

如果图像是在线托管的。

Answer 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

Link 从 Object 作为 src 到 img 标签

Link from Object as src to img tag

vue.js

vuejs3

感谢您的帮助！