Sometimes, we want to concatenate img src variable and text with Vue.js.

In this article, we’ll look at how to concatenate img src variable and text with Vue.js.

How to concatenate img src variable and text with Vue.js?

To concatenate img src variable and text with Vue.js, we can use template literals.

For instance, we write

<template>
  <div id="app">
    <img :src="`${imgPreUrl()}img/logo.png`" />
  </div>
</template>

to set the src prop to ${imgPreUrl()}img/logo.png.

We combine the string returned by imgPreUrl() with the rest of the string with the template literal.

Conclusion

To concatenate img src variable and text with Vue.js, we can use template literals.