4

用了 webpack 进行构建,图片部分的 loader 如下

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'url',
  query: {
    limit: 10000,
    name: '[name].[ext]?[hash:7]'
  }
}

模板代码

<template v-for="item in items">
  <li v-show="item.show">
    <a href="#">
      <img v-bind:src="item.img">
    </a>
  </li>
</template>

遇到的问题是item.img中的路径并不会被 webpack 编译,还保持着相对路径的状态,最终产生 404 错误。
请问应该如何解决?

xjx0524 53
2016-03-11 提问

查看全部 5 个回答

29

已采纳

有多种方法解决这个问题:

首先,如果使用的是img标签那么可以这样

data () {
    return {
        img: require('path/to/your/source')
    }
}

然后在template中

<img :src="img" />

如果使用的是背景图的方式,那么

可以这样

data () {
    return {
        img: require('path/to/your/source')
    }
}

<div :style="{backgroundImage: 'url(' + img + ')'}"></div>

或者直接在css中定义

background-image: url('path/to/your/source');
7

那么如何在返回的数据中(数组)添加require('path/to/your/source')

幸福来敲门 · 2016年10月09日

展开评论

推广链接