mustache - How to get the base asset url in a Shopify liquid theme?

Solution:

You can escape liquid templates (https://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags), so your tag would be like this

<img src="/path/to/assets/folder/{{ "{{ color " }}}}1.jpg">
Copy code

not nice if you ask me. But there is another option, use vue bind instead of text interpolation, so there is no curly braces, when you use thev-bind directive, then you write pure javascript for that directive, so you quote yoursrc attribute, or add it to a variable of your component.

usign the text

<img :src=" '/path/to/assets/folder/' + color + '1.jpg' ">
Copy code

usign a variable

<!-- template -->
<img :src="img_path">

// js, data or props attribute
img_path: '/path/to/assets/folder/' + color + '1.jpg'
Copy code

note: I used the shorthand version ofv-bind:src => :src