下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式： background:url(../../assets/head.jpg); 这个时候我们就要考虑使用其他的方式了，node中提供了一种比较有效的方式来解决这个问题： 1、在data中定义如下： export default { name: 'productdetailspage', data() {

在项目中经常会遇到需要将不同的二维码放到一张通用图片上，提供用户下载 简单来说，就是利用canvas将同等比例的二维码在图片上叠加，生成海报 1. 设置相应比例 一般来说海报背景都是固定的，可以直接放在public文件夹，二维码可根据后台返回数据，也可用canvas生成，在此不多赘述 import posterBgImg from '../public/images/poster_bg.png';// 海报底图 import qrcodeImg from '../public/images/