【问题标题】: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

【问题讨论】:

    标签: vue.js webpack vuejs2


    【解决方案1】:

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

    yourUrl (){
        //build your url here, can be base url or whatever
        return url
    }
    
    //html
    :src="yourUrl"
    

    应该是这样的。

    【讨论】:

    • 我加在data{ base_url: window.location.origin }是好是坏?
    • @Rbex 没关系
    【解决方案2】:

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

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

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

    【讨论】:

    • 这应该是公认的答案。在最终找到这个解决方案之前,我看了很多次。谢谢!
    • 另外,'src' 的 '@' 别名在这里会派上用场。
    【解决方案3】:

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

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

    export const baseUrl = 'my/img/base'
    

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

    import { baseUrl } from '@/src/config'
    
    data () {
      return {
        baseUrl: baseUrl 
        ...
      }
    }
    

    更改配置位置的路径。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-08-27
      • 2015-05-02
      • 2018-08-16
      • 1970-01-01
      相关资源
      最近更新 更多