Closed PrimozRome closed 8 years ago
Use relative paths if you can. Paths without ./ are treated as root paths.
Tried that as well but does not make any difference... Here's how I am trying to do it with my app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
shared_state: window.shared_state
}
}
}
</script>
<style lang="stylus">
body
direction: ltr;
background: url('./assets/img/bg1.jpg')
#app
height: 100%;
</style>
Tested and it's working for me. Please provide a reproduction repo.
@yyx990803
Hi. It is working, looks like I am having some problems when I have added support for Stylus... I will try to figure it out what is happening.
One question though... do I have to use file paths inside vue files relative to that file or always start from ./assets/img? For example if my structure is like this:
src
assets
img
bg.jpg
components
pages
login.vue
So when referencing bg.jpg inside a CSS in login.vue should I reference it like:
background-image: url('./assets/img/bg.jpg')
or
background-image: url('../../assets/img/bg.jpg')
Thanks for helping.
The latter - always relative to the file you are editing.
我也遇到类似的问题。 当CSS 背景图片URL是写在相应div的class里 如background-image: url('../assets/images/1.png'),该背景图片会显示,但是如果该URL写在对应div的style属性内,该图片不会显示。不知道我的配置文件要做什么样的修改
请问 放在template中的图片路径应该怎么设置呢?
just do next background: url(~assets/img/m/bg-header.jpg);
放在template中的图片,打包出来以后,会发现路径错误~ 应该和webpack打包有关系,vue-cli 2.0 有地方可以修改配置,但是vue-cli 3.0 怎么修改呢?
Tried that as well but does not make any difference... Here's how I am trying to do it with my app.vue
<template> <div> <router-view></router-view> </div> </template> <script> export default { data () { return { shared_state: window.shared_state } } } </script> <style lang="stylus"> body direction: ltr; background: url('./assets/img/bg1.jpg') #app height: 100%; </style>
This works perfect, thanks
vue-cli3中,这样修改好麻烦啊,,还有别的办法没?
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.tap(options => {
return merge(options, {
publicPath: '//id.jd.com/www/3c-medal/babel/',
limit: 3000
})
})
config.module
.rule('svg')
.use('file-loader')
.tap(options => ((options.publicPath = '//id.jd.com/www/3c-medal/babel/'), options))
}
i do something like this:
$assets: '~@/assets/';
html {
background: url( $assets + '/path.jpeg') no-repeat center center fixed;
}
@saloev, I think it looks even better like this:
@function asset($path) {
@return url("~@/assets/#{$path}");
}
html {
background: asset('path.jpeg') no-repeat center center fixed;
}
Following this tutorial, I was able to put this function and other variables in an implicitly loaded file variables.scss
:
// vue.config.js
css: {
loaderOptions: {
sass: {
data: "@import '@/assets/variables.scss';"
}
}
}
In case anybody came looking to add an image to a css content
element like I was:
content: url(~@/assets/path/to-image.png);
Thanks @saloev and @mk12! I looked everywhere for this.
@yyx990803 Is there a reason why @SeanRParker solution is not documented? Or maybe I have missed it?
background: url("~@assets/login_bg.jpg")
I use ~@assets and it's show
To install it, you can run: npm install --save @assets/login_bg.jpg
@oivinds the doc of css-loader explains some about ~
in url
@NullYing If you confirm it's bug of CLI, you can open a new issue and provide a reproducible repo
If I add background-image: url('some-image.jpg') CSS property to some element it does now show up in my app inside browser... Any idea why?