Categories
Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *