如何将vue道具数据附加到图像源的基本路径

Question

最近我一直在使用Vue js和Laravel，我试图从源获取图像，图像源包含基本路径和vue道具数据。但问题是它返回一个错误，指出vue无法评估表达式。任何帮助将不胜感激谢谢

<a class="thumbLink"><img data-large="url('uploads/products/285x380/@{{ 
    itemDetails.product_image}}')" alt="img" class="img-responsive" 
    src="uploads/products/285x380/@{{ itemDetails.product_image) }}"> 
</a> 

错误消息

[Vue warn]: Invalid expression. Generated function body: "uploads/products/285x380/"+(scope.itemDetails.product_image)) 

[Vue warn]: Error when evaluating expression ""uploads/products/285x380/"+(itemDetails.product_image))". Turn on debug mode to see stack trace. 

[Vue warn]: src="uploads/products/285x380/{{ itemDetails.product_image) }}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead. 

[Vue warn]: Error when evaluating expression ""uploads/products/285x380/"+(itemDetails.product_image))". Turn on debug mode to see stack trace. 

[Vue warn]: src="{{ itemDetails.product_image_lg }}": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead. 

Answer 1

因为有一个语法错误Vue公司无法计算表达式。 @{{ itemDetails.product_image) }}中有一个不必要的右括号)。

此外，还有一个警告建议使用v-bind:src而不是插值。

这里有两个应用改变代码：

<a class="thumbLink"> 
    <img data-large="url('uploads/products/285x380/@{{ itemDetails.product_image}}')" 
     alt="img" 
     class="img-responsive" 
     :src="'uploads/products/285x380/' + itemDetails.product_image" 
    > 
</a> 

---

注意:src是v-bind:src简写。使用v-bind会导致整个属性被评估为表达式。