Vue delimiter not working in attribute, but working in element

user_14261751 0
Viewed 146

delimiter is working in paragraph, but not working for image, check below comments

<div id="productslist">
<div v-for="product in products">
    <h2>[[product.productname]]</h2>
    <p>[[product.mrp]]</p>
    <p>[[product.sp]]</p>
    <p>[[product.description]]</p>
    <div v-for="image in product.images">
        <!-- here delimiter is working -->
        <p>[[image]]</p>
        <!-- here delimiter is not working -->
        <img src="/media/[[image]]"></img>
    </div>
</div>

even in web inspector, this delimiter is showing as [[image]] only for image, but for paragraph [[image]] is being rendered

vuejs2 vue-component vue.js html javascript
1 Answers

You shouldn't use delimiters in attributes. You're also missing a binding on the src attribute like :src which is shorthand for v-bind:src.

Try using a string template literal:

<img :src="`/media/${image}`"></img>
user_21850930
Related