从对象作为 src 链接到 img 标签

卟啉单胞菌

我想传递信息（链接）表单对象，并将其作为图像的 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>

谢谢您的帮助！

马星云汤

使用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一起传递到src的属性<image>。

请注意，mustache 语法 ,{{ something }}不适用于 HTML 属性；它仅适用于元素，例如<p>{{ something }}</p>.

另外，还要注意的不是v-bind:attribute，你可以省略的v-bind部分，只保留结肠，像这样：:attribute。这使得绑定属性更容易。

有关更多信息和示例，请参阅文档

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。