How to pass value from data to html attribute in vue?

Question

Vue.js

I'm trying to do this (I think you understand the meaning of what I want to get) but it doesn't work) how is it customary to do such things?
<img src="/img/{{imgName}}.jpg" alt>

Answer 1

Use dynamic value binding.
Collect the value itself using normal javascript expressions: or You can also make a computed property if imgName is a component property:
:src="`/img/${imgName}.jpg`"
:src="'/img/' + imgName + '.jpg'"

computed: {
  imgSrc() {
    return `/img/${this.imgName}.jpg`;
  },
},

:src="imgSrc"
Or make a method if you need to collect the path to the image in more than one place, with different names:

methods: {
  imgSrc: name => `/img/${name}.jpg`,
},

:src="imgSrc(imgName)"