How to use an imported variable in a template?

Question

Vue.js

I'm trying Vue a little, but I can't figure out how I can use the imported variable in the template, combining it with props.

Component

<template>
  ...
  
  <img class="article__image" :src="HOST + image" /> // вот тут
  ...
</template>

<style lang="scss" scoped>
@import "Article";
</style>

<script lang="ts">
import {HOST} from "@/config/api"

export default {
  props: {
    title: String,
    text: String,
    id: String,
    image: String
  },
}
</script>

In React, I would do this: <img src=`${HOST}/${image}` />

How is it done in Vue?

Answer 1

Everything that is specified in data (as well as in props and methods) is available in the template if you use the Options API, or everything that the setup () method returns if you use the Vue 3 Composition API.
https://vuejs.org/v2/guide/components.html
https://v3.vuejs.org/guide/component-basics.html
https://v3.vuejs.org/guide/composition-api-introdu. ..
In addition, in your case, the correct solution would be to have a computed property that will generate the src of the image (glue the HOST with props.image) and use it in the template already.