如何將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會導致整個屬性被評估爲表達式。