Comments (17)
我也遇到类似的问题。 当CSS 背景图片URL是写在相应div的class里 如background-image: url('../assets/images/1.png'),该背景图片会显示,但是如果该URL写在对应div的style属性内,该图片不会显示。不知道我的配置文件要做什么样的修改
from vue-cli.
just do next background: url(~assets/img/m/bg-header.jpg);
from vue-cli.
i do something like this:
$assets: '~@/assets/';
html {
background: url( $assets + '/path.jpeg') no-repeat center center fixed;
}
from vue-cli.
@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';"
}
}
}
from vue-cli.
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.
from vue-cli.
The latter - always relative to the file you are editing.
from vue-cli.
Use relative paths if you can. Paths without ./ are treated as root paths.
from vue-cli.
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))
}
from vue-cli.
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.
from vue-cli.
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>
from vue-cli.
Tested and it's working for me. Please provide a reproduction repo.
from vue-cli.
请问 放在template中的图片路径应该怎么设置呢?
from vue-cli.
放在template中的图片,打包出来以后,会发现路径错误~ 应该和webpack打包有关系,vue-cli 2.0 有地方可以修改配置,但是vue-cli 3.0 怎么修改呢?
from vue-cli.
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
from vue-cli.
@yyx990803 Is there a reason why @SeanRParker solution is not documented? Or maybe I have missed it?
from vue-cli.
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
from vue-cli.
@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
from vue-cli.
Related Issues (20)
- 打包后后dist下index.html
- command vue create without project folder throws error regarding parent folder name
- 打包成lib库后,导入主应用中,浏览器一直报Uncaught TypeError: Cannot read properties of undefined (reading 'pushScopeId') HOT 3
- Node 18 support : @achrinza/[email protected]: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17" HOT 19
- vue ui创建的Vue2 default项目ie11白屏 HOT 1
- support for TS >= 5.0 in cli-plugin-unit-jest HOT 1
- we set the integrity parameter of the cli to true. The generated sha384 encoding did not match that of the actual file.
- the comands @keyup.enter is not working
- ResizeObserver loop completed with undelivered notifications. HOT 6
- install. @vue/cli-plugin-unit-jest. error. Unsupported URL Type "npm:": npm:string-width@^4.2.0 HOT 3
- Does @vue/cli-service provide a way to call the JavaScript API to build? HOT 5
- Error run unit test: jest , vuetify
- Unable start project i.e NPM serve after creating project vue3 project using CLI
- V-bind() in SFC CSS does not work when upgrading Electron version
- 怎么禁止vue.config.js默认的HtmlWebpackPlugin,自己在configureWebpack.plugin中配置HtmlWebpackPlugin?
- vue-cli 4.x -->upgrade 5.0.8 Module not found: Error: Can't resolve 'vue-hljs' in 'D:\develop HOT 1
- Npm run serve svg error 98% after emitting CopyPlugin HOT 4
- Add --app-name arg to vue-cli-service
- Security: Vulnerabilites - 2 High, 3 Moderate HOT 2
- 我需要对pages中的模块独立打包成多个dist包,并用模块名作为dist包名。并且assets+index.html的webpack打包后的结构
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-cli.