[Vuejs]-How to get the base asset url in a Shopify liquid theme?

0👍

You can escape liquid templates, so your tag would be like this

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

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 the v-bind directive, then you write pure javascript for that directive, so you quote your src attribute, or add it to a variable of your component.

usign the text

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

usign a variable

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

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

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

Leave a comment