escaping double quotes in double quotes for handlebars

Question

I have this html x handlebars code:

                    {{#each product.custom_fields}}
                      {{#if name '===' 'hero_image_name'}}
                        <source media="(min-width: 800px)"
                            srcset="{{cdn "webdav:product_images/{{{value}}}"}}"
                      {{/if}}
                    {{/each}}>

the problem is, I cannot render the "{{{value}}}" inside the srcset. It just literally outputs "{{{value}}}".

I tried escaping it, with backslashes, scripts like these:

        Handlebars.registerHelper('escape', function(variable) {
        return variable.replace(/(['"])/g, '\\$1');
    });

and then adding:

{{{escape value}}}

but nothing seems to work. I couldn't find any specific case like this, does someone has an idea how to output this?

Answer 1

You need to use it like this

 {{#each product.custom_fields}}
                      {{#if name '===' 'hero_image_name'}}
                        <source media="(min-width: 800px)"
                             // with double braces not triple {{value}}
                            srcset="{{cdn "webdav:product_images/{{value}}"}}"
                      {{/if}}
                    {{/each}}>

Ref: https://handlebarsjs.com/guide/expressions.html