uniapp 图片组件image

怼烎@ 2021-07-24 11:48 1383阅读 0赞

默认宽300,高225
    
    src="路径"
    mode=''aspectFit"
    	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    	
    mode="aspectFill"
    	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    
    mode="scaleToFill"
    	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    
    mode="widthFix"
    	宽度不变，高度自动变化，保持原图宽高比不变

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
代码示例:

<template>
    	<view>
    		<image 
    		mode="aspectFit"
    		src='https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713396441,1487163637&fm=26&gp=0.jpg'></image>
    		<image
    		mode="aspectFill"
    		src='https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713396441,1487163637&fm=26&gp=0.jpg'></image>
    
    	
    	</view>
    </template>
    
    <script>
    </script>
    
    <style scoped>
    	.box{ 
    		height: 100px;
    		width: 100px;
    		background-color: #4CD964;
    	}
    	.box1{ 
    		background-color: #007AFF;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200505154756154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，1383人围观）

还没有评论，来说两句吧...

相关阅读

相关 vant-Image图片组件本地图片无法显示

刚开始遇到这个问题的时候百思不得其解，什么方法都用过了，网络图片路径可以正常显示，唯独本地图片不能显示，开始以为只是路径错了。文档也没有写怎么加载本地图片，到处挖坑。

短命女/ 2023年01月16日 11:05/ 0 赞/ 9 阅读

相关 el-image隐藏组件el-image-viewer点击次序预览图片

最近工作项目中有个需求，非要点击“预览”文字进行图片组的大图预览，想着技术栈中刚好有elementui，可以借用el-image的预览功能。但…实在有些许鸡肋，功能的自由感太低

分手后的思念是犯贱/ 2022年12月26日 08:27/ 0 赞/ 280 阅读

相关 react-native图片组件Image

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

刺骨的言语ヽ痛彻心扉/ 2022年05月25日 13:07/ 0 赞/ 288 阅读

相关 vue-image-crop-upload 一个强大的图片剪切组件

场景分析组件地址安装用法效果场景

我就是我/ 2022年05月17日 02:56/ 0 赞/ 208 阅读

相关 uniapp 上传图片文件组件

<template> <view> <view @click="uploadClick" class="picBox">

迈不过友情╰/ 2021年09月19日 04:08/ 0 赞/ 699 阅读

相关微信小程序 image 图片组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，[2.3.0][] 起支持云文

梦里梦外;/ 2021年09月08日 06:22/ 0 赞/ 555 阅读

相关 taro 图片Image

1、导入 import {Image} from '@tarojs/components' 2、使用本地图片: im

红太狼/ 2021年07月25日 01:28/ 0 赞/ 729 阅读

相关 flutter 图片组件Image、圆角组件ClipOval、裁剪矩形组件ClipRect、本地静态图片ImageIcon

Image: 加载网络图片: Image.network( "路径', height:n, w

浅浅的花香味﹌/ 2021年07月24日 22:21/ 0 赞/ 546 阅读

相关 rn 图片组件Image、滚动条组件ScrollView

图片组件 <Image /> 属性: 1、加载本地图片:source={require('路径')} 其中:

淡淡的烟草味﹌/ 2021年07月24日 16:18/ 0 赞/ 768 阅读

相关 uniapp 图片组件image

默认宽300,高225 src="路径" mode=''aspectFit" 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是

怼烎@/ 2021年07月24日 11:48/ 0 赞/ 1384 阅读