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

xjx0524
  • 52

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

回复
阅读 53.2k
5 个回答

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

首先,如果使用的是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');
Sweets82312
  • 60

可以查看官方的 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">
azad112358
  • 2
新手上路,请多包涵

写成CSS背景图

mogic
  • 2
新手上路,请多包涵

可以先不写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)
}
pandd
  • 1
新手上路,请多包涵

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏