Vue css introduces picture problem

clipboard.png

as shown in the picture, I have a common style.css under static and want to introduce a picture file in assets. How to write url is not correct after trying for a long time. (
Vue-router vue-cli vue.js
May.07,2021 
 background: url(../assets/img/sprite-1.jpg)

just use the relative path. How to use it before or how to use it now

< H2 > vue project < / H2 > < H2 > < H2 > vue file references 
<img src="@/assets/img/bg@2x.png" >
<i :style="`background-image: url(${require('@/assets/img/bg@2x.png')});`"  />

or 

<img :src="passport" >

<script>
export default {
  data() {
    return {
      passport: require('@/assets/img/bg@2x.png'),
    }
  },
}
</scipt>

style file references 

.demo{
  background-image: url("~@/assets/img/bg@2x.png");
}

if you want to use static instead of assets , Please refer to: https://github.com/vuejs/vue-.

vue-cli has already configured the src directory. How do you need to find the relative directory and look up at the first level? the upper level directory of your style.css is css,css 's parent directory is static,. Obviously, the directory src is not under static. Of course, can not be found, I hope you can help you

static directory under the picture also put in the static directory, use the relative path can

I remember I was using the background way to introduce the background image in the path can not have'-', change your picture name to sprite_1.png try

excuse me, have you solved the problem? How did you solve it?

the new version is also recommended to be put into assets, so it's better to package

if you use vue-cli, the code under the static folder will not be compiled, what url in css is packaged or what, the assets code and images under src will be processed, and the packaging path depends on the assetsRoot,assetsSubDirectory parameters you configure. There is no assets folder after packaging, and the static folder is copied without processing.

Previous: Vue single page application how to add individual pages?

Next: Implement tree structure data es6

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu