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

版权声明：本文为QQ帝国原创博客，非经本人同意，且勿转载。。 https://blog.csdn.net/QQ_Empire/article/details/83143033

 例如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>

ok大功告成 

---

 引入img 图片方法

第一步：在.vue文件中import  edit from 'path'（path是图片与.vue的相对路径）

第二步：在data对象中定义一个属性edits，值对应edit

第三步：在template中 给标签绑定属性

最后刷新界面看效果就可以了！