Vue项目中设置背景图片方法

在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式:

background:url("../../assets/head.jpg");

这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题:

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>

就这样就能完美的解决这个问题了。

以上这篇Vue项目中设置背景图片方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

您可能感兴趣的文章:

  • 关于Vue背景图打包之后访问路径错误问题的解决
  • Vue-cli中为单独页面设置背景色的实现方法
时间: 2018-02-18

关于Vue背景图打包之后访问路径错误问题的解决

案例环境 通过vue-cli脚手架创建的vue项目 在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsP

Vue-cli中为单独页面设置背景色的实现方法

例子: <template> <div class="finish-wrap"> <div class="finish-header"> <div class="finish-img"> </div> </div> <div class="finish-tip"> 支付成功 </div> <div class="fi

使用Vue-cli 中为单独页面设置背景图片铺满全屏

啥也不说了,大家还是直接看代码吧~ <template> <div id="logo"> </div> </template> <script> import meadiaurl from '../../api/mediaurl' export default { name: "logo" </script> <style scoped> #logo{ background: url

使用 Vue cli 3.0 构建自定义组件库的方法

本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

在vue项目中使用Nprogress.js进度条的方法

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

在Vue组件中获取全局的点击事件方法

使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

Vue 应用中结合vux使用微信 jssdk的方法

vux微信分享说明 分享接口只有认证公众号才能使用,域名必须备案且在微信后台设置. 先确认已经满足使用jssdk的要求再进行开发. 引入 在 main.js 中全局引入: import { WechatPlugin } from 'vux' Vue.use(WechatPlugin) console.log(Vue.wechat) // 可以直接访问 wx 对象. 组件外使用 考虑到你需要在引入插件后调用config方法进行配置,你可以通过 Vue.wechat 在组件外部访问wx对象. jss

在vue项目中,将juery设置为全局变量的方法

1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首先加入: const webpack = require("webpack") 然后在module.exports 对象中加入: plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.Prov

vue项目中使用vue-layer弹框插件的方法

vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: '信息', content: '', area: 'auto', offset: 'auto', icon: -1, btn: '确定', time: 0

Vue项目中使用flow做类型检测的方法

在vue2.0的项目中加入flow类型检查.当前项目是用js写的,当项目越来越大,由于js弱类型的特性,相比ts(typescript)这种强类型的语言而言,后期维护会越来越困难.为了解决这个问题,决定使用flow 加入类型检查. flow了解 flow是fackbook公布的javascript静态类型检查器. 可以检查js中一些bug,eg:自动类型转换中出现的问题.flow官网 首先,安装flow npm i flow-bin --save-dev 然后在package.json中添加脚本

Vue项目中使用better-scroll实现菜单映射功能方法

组件全部代码 <template> <div class="goods"> <!--左侧区域--> <div class="menu-wrapper" ref="left"> <ul class="menu"> <li class="menu-item border-bottom" :class="{'current':curren