组件Image的使用

一、组件Image

  1. 在开发中有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源

  2. 从当前RN项目中加载图片

       <Image source={require("./img/2.png")} >

      1) RN中引入其他文件中的内容基本都是使用require引用,图片也不例外

      2) require后面的路径跟img中src中的路径原理基本一样,但有两比较重要的点

         a) 同级目录的话require的做法是在路径前加[./]来标识,如下图的引入方式为

            见《图片路径和image中source的关系》

             <Image source={require("./img/2.png")} />


       3) 在html中img中src的路径是可以拼接的,但rn中使用require引入图片的话路径目前是不可拼接的。比如如下的两种写法就会报错

          var imgSrc = "./img/2.png";
          //错误示范1
          <Image source={require(imgSrc )}>
          //错误示范2
          var imgName = "2.png";
          <Image source={require("./img/"+imgName)}>

       4) React Native的Packager会根据平台选择相应的文件,例如:my_icon.ios.png和my_icon.android.png两个文件,加载时会根据平台选择相应的文件

  3. 从Android或iOS项目中加载图片

       <View>
               <Image source={{uri:"1.jpg"}) style={{width:50,height:50}}}
       </View>

       1) 必须将图片放到iOS项目中的asset文件夹或者Android drawable文件夹(如果不知道这两个文件,自行百度),当项目在iOS端运行时会自动加载asset中的图片,在android端运行时会自动加载drawable中的图片

   4. 加载来自网络的图片

        跟加载iOS项目和android项目中图片的方式一样,只不过,加载网络中的图片时,需要指定一下图片的尺寸

          <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{width:200, height:100}}/>


   5. 注意

        当你在android和iOS项目中增加图片后,仅仅reload, 图片是无法显示的,你必须要重新安装这个软件

   6. Image组件常用属性

        onLayout(function)

              当Image布局发生改变时,会调用该方法

        onload(function)

            当图片加载成功之后,回调该方法

        onloadEnd(function)

            当图片加载完成回调该方法,不会管图片加载成功还是失败

        onloadStart(function)

            当图片开始加载时调用该方法

        resizeMode

            Image.resizeMode.cover:   图片居中显示,没有被拉伸,超出部分被截断;
            Image.resizeMode.contain: 容器完全容纳图片,图片等比例进拉伸;
            Image.resizeMode.stretch: 图片被拉伸适应容器大小,有可能会发生变形

        source

            进行标记图片的引用,该参数可以作为一个网络url地址或者一个本地的路径


在若依(Ruyi)框架中,使用图片上传组件`ruyi-imageupload`可以按照以下步骤进行: 1. 添加依赖:首先确保你的项目已经添加了若依的依赖。如果你使用的是Maven,可以在pom.xml中加入相应的`ruyi-ui`模块。 ```xml <dependency> <groupId>com.ruyi</groupId> <artifactId>ruyi-ui</artifactId> <version>{最新版本}</version> </dependency> ``` 2. 引入组件:在HTML模板中引入`ruyi-imageupload`组件,通常是通过包含相应的CSS和JavaScript文件。 ```html <link rel="stylesheet" href="${assetPath}/ruyi/imageupload/imageupload.css"> <script src="${assetPath}/ruyi/imageupload/imageupload.js"></script> ``` 3. 创建上传控件:在页面上创建一个`<div>`或者其他容器标签,并设置其`data-uploader-id`属性为唯一标识符,以便与后台交互。 ```html <div id="myImageUploader" data-uploader-id="uploader1"></div> ``` 4. 初始化组件:在JS代码里初始化`ruyi-imageupload`,并配置选项,如上传URL、文件格式等。 ```javascript var uploader = ruyi.imageUpload.init({ selector: '#myImageUploader', url: '/api/file/upload', // 图片上传的后端API地址 accept: 'image/*', // 可接受的文件类型 maxCount: 1, // 最大上传数量 }); ``` 5. 用户上传操作:用户可以选择图片后,组件会自动触发上传。完成后,你可以在后台接收到文件并进行相应处理。 6. 响应处理:在后端,对于`/api/file/upload`路径的POST请求,接收上传的文件,保存至服务器,然后返回上传结果给前端。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值