php - 如何将 vue Prop 数据附加到图像源的基本路径

Question

我最近一直在使用 Vue js 和 Laravel，我正在尝试从源获取图像，图像源包含基本路径和 vue prop 数据。但问题是它返回一个错误，指出 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 会导致整个属性被评估为表达式。