vue踩坑系列——backgroundImage路径问题

vue踩坑系列——backgroundImage路径问题项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式在打包build的设置路径assetsPublicPath:‘./‘,然后那些没有转成base64的背景图都失效了,,路径。处理方法:使用require引入图片img标签<img:src="require(‘assets/img/header/sea…

项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式

在打包build的设置路径assetsPublicPath: ‘./‘,然后那些没有转成base64的背景图都失效了,,路径。

处理方法:
使用require引入图片

img标签

<img :src="require('assets/img/header/search.png')">

背景图

<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>


        <span :style="{backgroundImage:'url('+require('../../assets/image/accounts/dayily.png')+')'}">

        </span>

也可以下面这种方式去写:
在前端开发中,background-image属性非常常见,有很多时候需要使用内联样式来绑定此属性,但是在vue-cli项目中,如果如下面代码填写路径会找不到图片
这里写图片描述
这里写图片描述

使用require()方法,require()是node.js方法

感谢分享:https://blog.csdn.net/MoLvSHan/article/details/78204972
感谢分享:https://www.cnblogs.com/lanshengzhong/p/8010720.html

今天的文章vue踩坑系列——backgroundImage路径问题分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30040.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注