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

【问题标题】：How to append a vue props data to base path for an image source如何将 vue 道具数据附加到图像源的基本路径
【发布时间】：2016-11-19 10:07:58
【问题描述】：

我最近一直在使用 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.

【问题讨论】：

标签： php laravel vue.js

【解决方案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 会导致整个属性被评估为一个表达式。

【讨论】：