如何在Vue项目中设置背景图片

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

background:url("../../assets/image/laosiji.jpg");

在node中有一种解决这个问题的方式,如下:
(1)在template中我们先这样写上:

<div :style="bgImg"/>

(2)我们需要在data中定义:

 export default {
    name: 'productdetailspage',
    data() {
        return {
            bgImg: {
                backgroundImage: "url(" + require("../../assets/save.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "25px auto"
          },
     }
 },

ok ,搞定!!!
可复制拿去用,图片路径自己改改,不客气~

发布了35 篇原创文章 · 获赞 17 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_39024950/article/details/88945700