uniapp 图片组件image

怼烎@ 2021-07-24 11:48 1316阅读 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 条评论，1316人围观）

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

相关阅读

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

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

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

相关 react-native图片组件Image

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

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

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

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

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

相关 uniapp 上传图片文件组件带PHP后台接收

交流群：836383650 前端组件： <template> <view> <view @click="uploadClick" c

客官°小女子只卖身不卖艺/ 2021年09月19日 12:52/ 0 赞/ 1270 阅读

相关 uniapp 上传图片文件组件

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

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

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

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

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

相关 taro 图片Image

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

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

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

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

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

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

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

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

相关 uniapp 图片组件image

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

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