vue.js 怎么改背景图片? 设置背景图片? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
vue.JS 设置背景图片的方法
在 Vue 项目开发中我们经常要向页面中添加背景图片, 可是当我们在样式中添加了背景图片后, 编译打包后, 配置到服务器上时, 由于路径解析的问题, 图片并不能够正确的显示出来, 如下 CSS 样式:
background:url("../../assets/head.jpg");
1, 在 data 中定义如下:
- export default {
- name: 'productdetailspage',
- data() {
- return {
- note: {
- backgroundImage: "url(" + require("../../assets/save.png") + ")",
- backgroundRepeat: "no-repeat",
- backgroundSize: "25px auto",
- marginTop: "5px",
- },
- }
- },
2, 通过行内样式将样式引入
<div class="note" :style ="note"></div>
就这样就能完美的解决这个问题了.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17344.html