首页 > 其他分享 >uni-app在手机上背景图片不显示

uni-app在手机上背景图片不显示

时间:2023-05-11 16:12:35浏览次数:47  
标签:indexBackgroundImage .. app static uni data 背景图片 加载

需求:

  在uniapp代码中view的背景图加载

 

问题:

  直接使用background-image: url(../../static/icon_top_bg.png); 会导致图片不显示

 

代码:

  

<template>

    <view class="index" :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cover'}">

        <!--你的内容-->

    </view>

</template>

  

<script>

     

    import indexBackgroundImage from "@/static/img/account_index.jpg"

     

    export default {

        data() {

            return {

                indexBackgroundImage:indexBackgroundImage

            }

        },

        methods: {

             

        }

    }

</script>

  

  

<style lang="scss" scoped="">

</style>

  

 总结:

  直接加载图片可能不会显示,绝对路径和相对路径都会不显示,需要动态加载图片地址,通过data赋值

标签:indexBackgroundImage,..,app,static,uni,data,背景图片,加载
From: https://www.cnblogs.com/hxmbk/p/17391356.html

相关文章

  • Unindent does not match any outer indentation level
    出现这个报错是因为格式有问题。查看是否正确缩进,有没有对齐,还有有没有tab和空格混用。可以打开notepad++来查看格式是否出现问题。1.下图的问题if前面有一个空格,应该删去。 2.前面都多出了一个空格,要删除。 3.这个也是因为多出了一个空格所以报错 ......
  • Communications link failure
    新装的centos7.9,mysql8.0.32,启动jar报错CommunicationslinkfailureThelastpacketsentsuccessfullytotheserverwas0millisecondsago.Thedriverhasnotreceivedanypacketsfromtheserver.研究了半天,有说网络问题,有说jdbc驱动问题,有说错误的连接配置...可......
  • 微信小程序获取appid 小程序appid获取 小程序页面链接获取
    1.可以获取任何小程序的appid2.可以获取任何小程序的对应页面链接3.以上二者收费服务2块钱一次,单独一项1元不支持后付费需要的加微信备注来意 ......
  • 论文阅读 -- High-speed_function_approximation_using_a_minimax_quadratic_interpol
    SFU设计算法基础Interpolation插值:给定有限点预测附近点的方法算法复现requireMaple代码复现精度与资源referenceHigh-SpeedFunctionApproximationminimaxcoeffAitken(埃特金)逐次插值法|一次插值、二次插值、k次插值FPGA_LUT-based_InterpolationF......
  • 京喜APP - 图片库优化
    作者:京东零售何骁介绍京喜APP早期开发主要是快速原生化迭代替代原有H5,提高用户体验,在这期间也积累了不少性能问题。之后我们开始进行一些性能优化相关的工作,本文主要是介绍京喜图片库相关优化策略以及关于图片相关的一些关联知识。图片性能问题作为电商APP,图片在各个业务场景......
  • APP自动化-多页列表滑动获取元素
    在APP自动化过程中,遇到目录类的元素需要获取元素里的值,如果存在多页,需要滑动很多次,可以通过循环+源码变化来判断是否滑动到底#wait.until(ec.visibility_of_element_located(locator)).click()#点击目录#开始正序listlocator=(By.ID,"com.zhao.myreader:id/tv_chapter_......
  • uniapp跳转到一个原生的页面
    一、创建原生页面并配置1.创建原生页面Demo2.配置原生页面继承Activity二、在继承UniModule的类中写对应的页面跳转逻辑三、在uniapp中配置跳转的按钮四、将打包好的本地资源替换到项目中,打包运行1.本地资源打包2.替换掉AndroidStudio项目中的文件3.编译运行,点击进入小镜......
  • uniapp自定义开发一个文本输入框
    开发component中的一个input标签一、在原来的模块上面创建一个新的类TestComponent1.新建TestComponent2.配置json文件二、uniapp准备工作1.在uniapp中写一下刚刚创建的输入框2.打包导出资源3.资源替换复制刚刚生成的本地资源文件夹到AndroidStudio项目中......
  • 未配置appkey或配置错误,uniapp原生安卓插件开发
    开发安卓原生插件一、官方文档1.https://nativesupport.dcloud.net.cn/NativePlugin/course/android2.下载对应的SDK、工程文件二、生成uniapp的appkey1.配置配置好Androidstudio的环境:SDK、JDK2.导入项目3.HbuilderX中创建新的项目“plugin_demo”,同时当前创建项目的APP......
  • uniapp简单实现轮播图
    轮播图 <viewclass="price-content-style"> <viewclass="price-style"> ¥350.00 </view> <viewclass="content-style"> 【官方正品】全新Dior迪奥烈焰蓝金唇膏红色传奇新色丝绒992548 </view>......