Question

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

# Main Linter
[[runners]]
  url = "https://gitlab.mydomain.com/ci"
  token = "XXXXXXXXXXXXXXXXXXXXXXXX"
  name = "MY_DEPLOY"
  executor = "docker"
  limit = 0
  [runners.docker]
    image = "my-deploy:latest"
    privileged = false
    cache_dir = ""
    disable_cache = true
    wait_for_services_timeout = 90

错误消息

<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>

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会将整个属性评估为表达式。

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

1 个答案: