vue.js+webpack 为 img src 赋值的路径问题？

Question

用了 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 错误。
请问应该如何解决？

Answer 1

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

首先，如果使用的是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');

Answer 2

可以查看官方的 issues html image src require not respecting webpack aliases?

//修改webpack.base.conf.js

  alias: {
    'src': resolve('src')
  }

//添加
'assets': resolve('src/assets')

之后就可以

vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~:

    <img class="logo" src="~assets/logo.png">

Answer 3

写成CSS背景图

Answer 4

可以先不写img标签，接口获取到需要的数据后用jquery插入img标签

<template v-for="item in items">
  <ul v-show="item.show" id="$index">
   <li ></li>
  </ul>
</template>

vue的ready里面

ready:function(){

var items = getDatas();//这里是获取动态的图片链接
setTimeOut(function(){
//codes
//jquery的append方法插入<a><img></a>
},0)
}

Answer 5

用v-html插入带标签语句
<div class="jcontent" v-html="item.content"/></div>

item.content = "<img src='外网图片地址'>"

就这么简单，只要外网允许跨域访问，就都能显示