Wie erhalte ich die Base Asset URL in einem Shopify Liquid Theme?

Question

Gibt es eine Möglichkeit, die Basis-Asset-URL in einem Shopify-Liquid-Theme zu erhalten?

Ich übersetze eine Seite zu Shopify. Diese Seite verwendet Vuejs Datenbindung wie so:

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

ich die geschweiften Klammern nicht an den Filter passieren kann, weil sie kodieren es URL wird. Wenn ich Zugriff auf die Asset-URL hätte, wäre das einfach.

Irgendwelche Ideen?

Answer 1

Sie können escape liquid templates, so dass Ihr Tag wäre wie diese

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

nicht schön, wenn Sie mich fragen. Aber es gibt eine andere Option, verwenden Sie vue bind anstelle von Text-Interpolation, also gibt es keine geschweiften Klammern, wenn Sie die v-bind Direktive verwenden, dann schreiben Sie reines Javascript für diese Anweisung, also zitieren Sie Ihr src Attribut oder fügen Sie es zu einer Variablen hinzu Ihrer Komponente.

usign den Text

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

usign eine variable

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

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

Anmerkung: Ich habe die Kurzversion von v-bind:src => :src