it is recommended that the subject set a path alias for webpack webpack.base.conf.js
.
resolve: {
alias: {
'@src': path.resolve(__dirname, '../src/assets')
}
}
and then use it
.active {
background: -sharp111c24 url('~@src/icon/login_active.png') no-repeat center;
}
@ src can accurately locate the assets directory and save all kinds of.. The writing method is simple and clear.
according to your description, picture resources are best placed in the static folder. Assets folders usually contain resources that will eventually be compressed and merged, such as css files.
refer to
in
main.js files.
import './assets/css/common.css'
In
development mode, the image address is relative to the current vue file address, while the image address in production mode is in the release path.
in fact, there is no need to put the picture in src/assets, this is a hole, where you report an error should be a problem with the configuration in webpack.
recommended image storage method
1. If the image is less than 8k (the compressed size is set in the webpack configuration), it will be compressed into base64 format. It is recommended to put it directly in this component's peer directory
.
background-image: url(./img/icon-1.png);
2 if the image is relatively large, you can put it in the public/images of the project root directory and manage it uniformly
background-image: url(/images/banner.png);
find a way, but you need to change the background color to a file in the assets referenced by the img tag
- in the webpack.base.conf file
alias: {'@ src': resolve ('src/assets')}
- import introduces pictures into vue
import imgs from'@ src/imgs/xxxx.png'
- write to data
data () {return {imglist:imgs}},
- write template binding
using style's css module mode, you can reference pictures directly in the style. It's simple:
<style module>
.active{
background: -sharp111c24 url(@/assets/icon/login_active.png) no-repeat center;
}
</style>
<template>
<div :class="$style.active"></div>
</template>
can be achieved without modifying existing code by modifying the config configuration.
index.html
