0

is there a way to get the base asset url in a Shopify liquid theme?

I'm translating a page to Shopify. This page uses Vuejs data binding like so:

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

I can't pass the curly braces to the filter because it will URL encode it. If I had access to the asset url it would be simple.

Any ideas?

lbrandao
  • 4,144
  • 4
  • 35
  • 43

1 Answers1

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

Community
  • 1
  • 1
Yerko Palma
  • 12,041
  • 5
  • 33
  • 57