Uniapp中的image设置height: auto不显示问题及如何解决

最新推荐文章于 2024-07-20 18:27:30 发布
最新推荐文章于 2024-07-20 18:27:30 发布
阅读量652 收藏
点赞数 4
文章标签： uni-app java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63553261/article/details/136452388
版权 
<image class="xxx" src="@/static/ruzhuPic.png" mode="widthFix"></image>

想要的效果高度随着宽度的变化而自适应变化，但是设置height：auto后直接不显示

解决：直接在标签内部加上mode="widthFix"，并且删除height: auto即可。

温馨提示：APP中图片要用image，用img标签不显示图片！！！！
不会八股文
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于uniapp中长图片父盒子宽度自适应的需求实现
March_Mango的博客
11-19 2595
先说结论： 绑定图片加载函数获得每张图片的宽高，然后通过屏幕大小和图片大小等比例缩放，计算得出每张图片的宽度：每张图所需宽度= 图片真实宽度/(图片真实高度/屏幕高度) 父盒子把每张图宽度相加，然后监听窗口的resize，重新赋值给父盒子宽度就行。 （代码直接看下面第三点） 1、需求 我要实现不同长度的图片拼接成一个连续的长图，就是高度不变，可以横向滚动的图片。 2、实现 首先我以为设定了图片height:100vh就好了，然后图片宽度可以自己进行自适应。然而，运行后的uni-image的
react-native-image-auto-height:根据提供的宽度自动设置图像的高度
04-06
import ImageAutoHeight from 'react-native-image-auto-height' ;export default class Demo extends Component { render ( ) { return ( < > < ImageAutoHeight xss=removed xss=removed> < ImageAutoHeigh
图片设置加上height: auto;图片不显示，不加，则显示
weixin_42604188的博客
01-15 456
如果将图片的 CSS 设置中的 height 设置为 auto，则图片将不会显示。这是因为当 height 设置为 auto 时，浏览器将不会明确指定图片的高度，因此图片将不会显示。如果不设置 height，则图片将显示。 ...
小程序设置图片height:auto,但是图片不显示,实际是高度为0
迪奥乔斯达的博客
08-18 3552
刚才在调的时候发现一个图片怎么都出不来,路径是对的 但是就好像消失了,看了下调试器里面的 显示图片高度为0 看了下wxss里的width: 50px;height: auto; height:auto;去掉 在<image>标签里加一个mode="widthFix"属性就行了 ...
uniapp css 设置图像image height：auto失效问题
weixin_43907110的博客
08-17 756
或display 不是行内值时 height：auto失效,导致图片height直接为0,图片显示不出来。
图片height: auto;，图片不显示
weixin_35755188的博客
01-15 377
当图片的高度设置为"auto"时，它的高度将根据图片的实际大小来自动调整。如果图片不显示，可能是因为图片的路径设置错误或者图片文件已经损坏。建议检查图片文件是否存在，并检查图片路径是否正确。 ...
uniapp图片高度自适应
qq_39609138的博客
06-16 1530
uniapp图片高度自适应
实现uniapp+Vue3中swiper组件的自动高度功能
hjd2018的博客
04-02 1060
本文将介绍如何使用Vue3的组合式API（Composition API）来实现swiper组件的自动高度功能。
DIV背景图片在Firefox下不显示通过overflow:auto可解决
09-25
标题提到的“DIV背景图片在Firefox下不显示通过overflow:auto可解决”就是一个典型的跨浏览器兼容性问题。 在Firefox中，当一个`div`元素包含浮动元素（如`float:left`或`float:right`），这个`div`元素本身可能...
移动端页面在ios中不显示图片的解决方法
08-28
在移动端Web开发中，iOS设备有时会出现图片无法显示的问题，这可能会给用户带来不愉快的体验。本文将探讨这个问题，并提供一种解决方案。 首先，我们需要理解这个问题的根源。iOS设备的Safari浏览器对于图片的处理...
uni-app 组件里面获取元素宽高的实现
10-15
主要介绍了uni-app 组件里面获取元素宽高的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
水晶报表图片不显示两种问题分析及解决方法
10-27
水晶报表布置后里面的图片不显示的情况，分两种：一是：水晶报表工具栏上的图片不显示；二是：水晶报表中的的图片对象不显示,接下来将分别介绍解决方法，感兴趣的朋友可以了解下啊
react-native-auto-height-image：:framed_picture:React本机自动高度图像
02-05
React Native Image组件需要用户同时设置width和height道具。 React Native版本要求：> = 0.46。 安装 yarn add react-native-auto-height-image npm install react-native-auto-height-image 用法 使用本地或...
uniapp image高度不自适应
qq_17627195的博客
07-30 1065
iamge中的属性mode=“widthFix”就可以了。
uniapp页面高度100%无效问题
wwwwssmas的博客
04-08 3948
用uniapp写小程序时，给页面设置背景颜色，但是设置高度百分百或者100vh都出现问题，此时可以在App.vue里设置全局css
Vue uniapp实现图片宽度100%、高度自适应的效果
热门推荐
qq_52099965的博客
03-26 1万+
Vue uniapp实现图片宽度100%、高度自适应的效果
image width auto 不显示问题
如果人生就像一场梦，那就希望你做个好梦！
03-11 959
场景：我想图片宽度自适应宽度，于是设置 image { width: auto; height: 280rpx; margin: 0 32rpx; } 但是很遗憾没有生效，图片直接不显示了，控制台显示width为0 解决方案: 添加display: block;属性 image { width: auto; height: 280rpx; margin: 0 32rpx; display: blo...
uni-app：踩坑路---scroll-view内使用fixed定位，无效的问题
最新发布
本以为成功很简单，没想到活成普通人都需拼尽全力！
07-20 594
emmm，说起来这个问题整得还挺好笑的，本人在公司内，奋笔疾书写代码，愉快的提交测试的时候，测试跟我说，在苹果手机上你这个样式有bug，我倒是要看看，是什么bug。安卓vs苹果ok，我相信已经看出了差异了，安卓的遮罩层正常显示，而苹果的遮罩层只在我的绿色框内，被截断了，我赶忙看代码：CustomItem.vue：自定义组件蓝色的正方形，外加上一个遮罩层，点击蓝色方块的时候，显示遮罩层，遮罩层内写我的要展示的一些内容。
uniapp swiper组件中，如何设置swiper和swiper-item，使得 image 图片居中显示，高度指定margin-bottom
03-30
可以通过以下方式来实现： 1. 在 swiper-item 中添加一个容器 div，设置该容器 div 的高度和 margin-bottom，然后将 image 图片放入该容器中。 2. 设置 image 图片的样式，使其在容器 div 中居中显示。 具体代码如下： ``` <swiper> <swiper-item> <div style="height: 200px; margin-bottom: 20px;"> <img src="image.jpg" style="display: block; margin: 0 auto; max-height: 100%; max-width: 100%;"> </div> </swiper-item> <swiper-item> <div style="height: 200px; margin-bottom: 20px;"> <img src="image.jpg" style="display: block; margin: 0 auto; max-height: 100%; max-width: 100%;"> </div> </swiper-item> <swiper-item> <div style="height: 200px; margin-bottom: 20px;"> <img src="image.jpg" style="display: block; margin: 0 auto; max-height: 100%; max-width: 100%;"> </div> </swiper-item> </swiper> ``` 其中，height 和 margin-bottom 可以根据实际需求进行调整。img 标签中的样式设置可以实现图片在容器 div 中居中显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值