Vue.js Vuejs 2图像Src属性

Vuejs likers帮助

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

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

怎么做？TY

执行以下操作时：src=“value”，它从计算/数据中获取值，因此只需在计算属性中构建url

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

//html
:src="yourUrl"

---

应该是这样。

如果我理解正确，您希望添加一个基本URL，以便在多个组件中使用，并且不希望在每个组件中都更改它

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

export const baseUrl = 'my/img/base'

然后在要附加该baseUrl的任何组件中

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

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

---

更改配置位置的路径。

您可以使用

require（）

告诉Webpack将此作为依赖项处理：

---

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

我将其添加到

数据{base\u url:window.location.origin}

它是好还是坏？@Rbex thats fine这应该是可接受的答案。在最终找到这个解决方案之前，我到处寻找。谢谢此外，“src”的“@”别名在这里也很方便。

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

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

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