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');

这篇关于vue.js+webpack 为 img src 赋值的路径问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！