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

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

回答:

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

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

回答:

可以查看官方的 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">

回答:

写成CSS背景图

回答:

可以先不写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)
}

回答:

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

item.content = “<img src=’外网图片地址’>”

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注