您现在的位置是:网站首页> 编程资料编程资料
vue踩坑之backgroundImage路径问题及解决_vue.js_
                     2023-05-24
                322人已围观
                
                2023-05-24
                322人已围观
            
简介 vue踩坑之backgroundImage路径问题及解决_vue.js_
vue backgroundImage路径问题
项目中图片都放在src/img文件夹,img和background-image引用都用相对路径,即../../这种形式
在打包build的设置路径assetsPublicPath: ‘./‘,然后那些没有转成base64的背景图都失效了,,路径。
处理方法
使用require引入图片
img标签
背景图
也可以下面这种方式去写
在前端开发中,background-image属性非常常见,有很多时候需要使用内联样式来绑定此属性,但是在vue-cli项目中,如果如下面代码填写路径会找不到图片


使用require()方法,require()是node.js方法
vue style中设置background-image时的路径问题
之前用的都是require方法
//常见并且常用的方式
而我想直接在style上写,不想费劲的去在数据层写了
实际上require这个函数是可以直接在style里面加的与上同理上
代码如下↓
//奇奇怪怪的方式,很少能用到,不过这次我用到了
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- JavaScript利用canvas实现鼠标跟随特效_javascript技巧_
- vue3如何使用watch监听props中的数据_vue.js_
- vue踩坑之backgroundImage路径问题及解决_vue.js_
- Vue中v-if、v-if-else、v-else-if与v-show的基本使用_vue.js_
- Vue中v-if、v-if-else、v-else-if与v-show的基本使用_vue.js_
- VScode更新后安装vetur仍无法格式化vue文件的解决_vue.js_
- TypeScript前端上传文件到MinIO示例详解_其它_
- jsoneditor二次封装实时预览json编辑器组件react版_React_
- Hello React的组件化方式之React入门小案例演示_React_
- 可能是全网最详细小程序中使用echarts的教程_javascript技巧_
 
                                
                                                         
                                
                                                         
                                
                                                         
 
    