Vuejs 2 图片来源属性答案

【问题标题】：Vuejs 2 Image Src AttributesVuejs 2 图片来源属性
【发布时间】：2017-09-21 23:01:44
【问题描述】：

喜欢 Vuejs 的人帮忙！

我有这个带有图像源的图像循环。这是代码。

<img :src="'../../'+ photo.path" alt="product" height="207" width="175" v-for="photo in product.photos" v-if="photo.is_primary === 1" />

我应该将此前缀替换为基本 url 以便可重用。

../../

怎么样？ TY

【问题讨论】：

【解决方案1】：

当您执行 :src="value" 时，它会从计算/数据中获取值，因此只需在计算属性中构建 url

yourUrl (){
    //build your url here, can be base url or whatever
    return url
}

//html
:src="yourUrl"

应该是这样的。

【讨论】：

【解决方案2】：

您可以使用require() 告诉 Webpack 将此作为依赖项处理：

<img :src="require('../../' + photo.path)" alt="..." />

这将使路径相对于构建文件而不是相对于组件文件。

【讨论】：

【解决方案3】：

如果我理解正确，您想添加一个将在多个组件中使用的基本 URL，并且您不想在每个组件中都对其进行更改？

你可以在你的 src 文件夹或任何地方创建一个 config.js 或任何你想命名的文件并添加

export const baseUrl = 'my/img/base'

然后在你想附加那个baseUrl的任何组件中，

import { baseUrl } from '@/src/config'

data () {
  return {
    baseUrl: baseUrl 
    ...
  }
}

更改配置位置的路径。

【讨论】：