イメージソースのベースパスにvue propsデータを追加する方法

Question

最近、Vue jsとLaravelで作業していましたが、ソースからイメージを取得しようとしています。イメージソースにはベースパスとvue propデータ。しかし、問題は、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

を高く評価します。不必要な右括弧)が@{{ itemDetails.product_image) }}にあります。

また、補間ではなくv-bind:srcを使用するよう警告が表示されます。

ここで適用され、両方の変更を伴うコードです：:srcは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> 

---

注意。 v-bindを使用すると、属性全体が式として評価されます。