[Vuejs]-Link from Object as src to img tag

by

2👍

✅

Use v-bind, like so:

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

Full code:

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

v-bind allows you to bind an (HTML) attribute to a data property or just some JS code. In this case you just pass along your image URL to the src attribute of the <image>.

Note that mustache syntax, {{ something }}, does not work in HTML attributes; it only will work within elements, like <p>{{ something }}</p>.

Also, note that instead of v-bind:attribute, you can omit the v-bind part and just keep the colon, like so: :attribute. This makes it easier to bind attributes.

For more info and examples see the docs

1👍

You should require it and use : to bind the image src to the required path if the image is stored in the app :

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

or :

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

if the image is hosted online.

Leave a comment