Как передать значение из data в атрибут html во vue?

Question

[Максим Золотой]

Пытаюсь сделать это ( я думаю вы поняли смысл того что я хочу получить ) но это не работает) как такие вещи принято делать?
<img src="/img/{{imgName}}.jpg" alt>

Answer 1

[0xD34F]

Используйте динамическую привязку значения.

Само значение собирайте с использованием обычных javascript-выражений:

:src="`/img/${imgName}.jpg`"

или

:src="'/img/' + imgName + '.jpg'"

Также можно сделать вычисляемое свойство, если imgName является свойством компонента:

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

:src="imgSrc"

Или сделайте метод, если собирать путь к изображению требуется более чем в одном месте, с разными name'ами:

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

:src="imgSrc(imgName)"