Vue分隔符不在属性中工作，但在元素中工作

Question

分隔符在段落中起作用，但不适用于图像， 检查下面的cmets

<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>

即使在网络检查器中，此分隔符仅在图像中显示为 [[image]]，但对于段落 [[image]] 正在呈现

Answer 1

您不应该在属性中使用分隔符。您还缺少src 属性上的绑定，例如:src，它是v-bind:src 的简写。

尝试使用字符串template literal：

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