.vue 文件中的style中如何正确引入assets中的图片

Question

在.vue 文件中的style中的css中想引入assets文件夹中的图片资源，总是报错
这是某个vue组件中style中的css，我这样根据相对路径就是获取不到图片资源

 .active {
          background: #111c24 url('../../assets/icon/login_active.png') no-repeat center;
        }

Answer 1

建议题主设置一个webpack的路径别名webpack.base.conf.js中

resolve: {
    alias: {
        '@src': path.resolve(__dirname, '../src/assets')
    }
}

然后使用的时候

 .active {
          background: #111c24 url('~@src/icon/login_active.png') no-repeat center;
}

@src就可以准确的定位到assets目录了，同时也省去了各种..的写法，简单明了。

Answer 2

根据你的描述，图片资源最好放到static文件夹，assets文件夹放的一般是最后会压缩合并的资源，比如css文件，
在main.js文件中引用

import './assets/css/common.css'

Answer 3

开发模式下，图片地址就是相对当前的vue文件地址，生产模式下的图片地址是在发布路径下的。

Answer 4

其实完全没必要将图片放在src/assets里面，这是一个坑，你那里报错应该是webpack里面配置的问题。

推荐的图片存放方式
1 如果图片小于8k（webpack配置里设置压缩大小），会被压缩成base64格式，建议直接放在这个组件同级目录

background-image: url(./img/icon-1.png);

2 如果图片比较大，可放在项目根目录的public/images里面，统一管理

background-image: url(/images/banner.png);

Answer 5

找到一种方法，不过需要把背景色变成img标签引用assets里的文件

1. webpack.base.conf 文件中

alias: {'@src': resolve('src/assets')}

1. vue中import引入图片

import imgs from '@src/imgs/xxxx.png'

1. 写入data中

data(){return {imglist:imgs}},

1. 写入模板绑定

<img :src="imglist">

Answer 6

使用style的css module模式，就可以直接在样式中引用图片了，很简单：

<style module>
.active{
    background: #111c24 url(@/assets/icon/login_active.png) no-repeat center;
}
</style>
<template>
    <div :class="$style.active"></div>
</template>

Answer 7

可以通过修改config配置实现不用修改已有代码。

打包后生成地址

index.html中的地址也会相应的变成