Vue - Interpolation inside attributes

Question

I have following error:

src="/images/{{ this.phCode }}/{{ this.galCode }}/thumb/thumb_{{ this.fileName }}": 
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. 
For example, instead of <div id="{{ val }}">, use <div :id="val">.

While the example is very clear, I am having difficulties to understand how to do it for my situation, where I have more than one variable in the attribute.

Answer 1

You can use template literals as follows:

:src="`/images/${this.phCode}/${this.galCode}/thumb/thumb_${this.fileName}`"