AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

后端程序员的前端捷径-超级容易上手使用的前端框架layUI（上）

2024-08-09 46
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 后端程序员的前端捷径-超级容易上手使用的前端框架layUI

1 LayUI 概述

官网：https://www.layui.com/

现网址：https://www.layuion.com/

在官网首页，可以很方便的下载LayUI

LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。

使得前端页面的制作变得更加简单。

2 layUI环境搭建

2.1 下载

在官网即可完成下载https://www.layui.com/

2.2 导入依赖

下载的LayUI解压后，将其中的layui目录导入项目中

<!-- 引入layUI的css   -->
<link href="layui/css/layui.css" rel="stylesheet">
<!-- 引入layUI的js核心库   -->
<script src="layui/layui.js"></script>

2 layUI布局

  • layUI的布局容器
  • layui-container : 带有左右留白的布局容器
  • layui-fluid : 占满屏幕的布局容器
  • 栅格系统
  • 响应式栅格布局，每行分 12 等分

布局容器

 <div class="layui-container" style="height: 300px;background: #123456">
</div>
<div class="layui-fluid" style="height: 300px;background: #123456">
</div>

响应式布局：移动设备、平板、桌面端的不同表现

<div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
        移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
        移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
        移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
</div>

栅格列间距

<div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
        <div style="background: #567890">1/3</div>
    </div>
    <div class="layui-col-md4">
        <div  style="background: #567890">1/3</div>
    </div>
    <div class="layui-col-md4" >
        <div style="background: #aabbcc">1/3</div>
    </div>
</div>

列偏移

<div class="layui-row">
    <div class="layui-col-md4">
        <div style="background: #567890">1/3</div>
    </div>
    <div class="layui-col-md4 layui-col-md-offset4">
        <div  style="background: #aabbcc">1/3</div>
    </div>
</div>

列嵌套

<div class="layui-row layui-col-space5">
    <div class="layui-col-md5">
        <div class="layui-row">
            <div class="layui-col-md3">
                内部列
            </div>
            <div class="layui-col-md9">
                内部列
            </div>
            <div class="layui-col-md12">
                内部列
            </div>
        </div>
    </div>
    <div class="layui-col-md7">
        <div class="layui-row">
            <div class="layui-col-md12">
                内部列
            </div>
            <div class="layui-col-md9">
                内部列
            </div>
            <div class="layui-col-md3">
                内部列
            </div>
        </div>
    </div>
</div>


4 layUI按钮

<!-- 按钮基本用法   -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<hr>
<!-- 常用的按钮样式   -->
<div>
    <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
    <button type="button" class="layui-btn">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
<hr>
<!-- 按钮尺寸  -->
<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
<hr>
<!-- 圆角按钮 -->
<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
<hr>
<!-- 带图标按钮 -->
<button type="button" class="layui-btn"><i class="layui-icon">&#xe68f;</i></button>
<button type="button" class="layui-btn"><i class="layui-icon layui-icon-email"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<button type="button" class="layui-btn"><i class="layui-icon"></i></button>
<hr>
<!-- 按钮组 -->
<div class="layui-btn-group">
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn ">编辑</button>
    <button type="button" class="layui-btn">删除</button>
</div>
<hr>
<!--带图标的按钮组-->
<div class="layui-btn-group">
    <button type="button" class="layui-btn layui-btn-normal">
        <i class="layui-icon layui-icon-mike"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-warm">
        <i class="layui-icon layui-icon-logout"></i>
    </button>
    <button type="button" class="layui-btn layui-btn-danger">
        <i class="layui-icon layui-icon-username"></i>
    </button>
</div>

5 layUI表单

使用表单要导入 form模块

样式：

  • 表单样式：layui-form
  • 表单项: layui-form-item
  • 表单元素块：layui-input-block

行内表单元素: layui-input-inline


属性：


必填属性：lay-verify=“required”

关闭输入框提示：autocomplete=“off”

设置复选框的风格： lay-skin=“primary”

事件过滤器：lay-filter

 

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label" for="name">输入框</label>
    <div class="layui-input-block">
      <input id="name" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">标签区域</label>
    <div class="layui-input-inline">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">联动选择框</label>
    <div class="layui-input-inline">
      <select name="quiz1">
        <option value="">请选择省</option>
        <option value="浙江" selected="">浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[game]" title="游戏">
    </div>
  </div>
  <div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
      <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
      <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关-默认关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="同意|不同意">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关-默认开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
  layui.use(['form', 'layedit', 'laydate'], function() {
    var form = layui.form;
  })
</script>

表单监听提交

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label" for="name">用户名</label>
    <div class="layui-input-block">
      <input id="name" type="text" name="username" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-inline">
      <select name="city">
        <option value="" disabled>请选择省</option>
        <option value="浙江省" selected="">浙江省</option>
        <option value="江西省">江西省</option>
        <option value="福建省">福建省</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" name="info" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>
  layui.use(['form', 'layedit', 'laydate'], function() {
    var form = layui.form;
    //监听提交
    form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
        })
        return false;
    });
  })
</script>

存值、取值表单

<form class="layui-form" action="" lay-filter="example">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[daze]" title="发呆">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
    </div>
  </div>
 
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>

    <script>
        layui.use('form',function () {
            var form = layui.form;

            //表单赋值
            layui.$('#LAY-component-form-setval').on('click', function(){
                form.val('example', {
                    "username": "贤心" // "name": "value"
                    ,"password": "123456"
                    ,"interest": 1
                    ,"like[write]": true //复选框选中状态
                    ,"close": true //开关状态
                    ,"sex": "女"
                    ,"desc": "我爱 layui"
                });
            });
            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function(){
                var data = form.val('example');
                //异步请求的操作
                //将json对象转换成json字符串
                alert(JSON.stringify(data));
            });
        })
    </script>


有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。

执行 form.render(type, filter); 方法即可

6 layUI导航

使用导航要导入 element模块

普通导航

样式：

  • layui-nav ： 导航
  • layui-bg-green : 导航背景
  • layui-nav-item ： 导航菜单
  • layui-this : 表示默认选中
  • layui-nav-child ：导航二级菜单
<!-- 普通导航 -->
<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item"><a href="">产品</a></li>
    <li class="layui-nav-item  layui-this"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> 
            <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<script>
    layui.use('element',function () {
        var element = layui.element;
    })
</script>

带徽章的导航

样式：

  • layui-badge：徽章方块效果
  • layui-badge-dot：徽章 点效果
  • layui-nav-img：导航图片
<ul class="layui-nav layui-bg-green">
    <li class="layui-nav-item">
        <a href="">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
        <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
</ul>

垂直导航

样式：

  • layui-nav-tree : 垂直导航
  • layui-nav-itemed: 默认展开
  • layui-nav-side: 侧边导航
<ul class="layui-nav layui-nav-tree" lay-filter="test">
    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
    <li class="layui-nav-item layui-nav-itemed">
        <a href="javascript:;">默认展开</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">选项1</a></dd>
            <dd><a href="javascript:;">选项2</a></dd>
            <dd><a href="">跳转</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

面包屑导航

样式：

  • layui-breadcrumb ：面包屑导航
  • lay-separator ：分隔符
<!--
面包屑导航
layui-breadcrumb
-->
<span class="layui-breadcrumb" lay-separator="----">
    <a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>

后端程序员的前端捷径-超级容易上手使用的前端框架layUI（下）：https://developer.aliyun.com/article/1580665

文章标签：
前端开发
程序员
容器
JavaScript
关键词：
后端前端
后端前端框架
前端layui
后端程序员前端
程序员前端
yinying293
目录
相关文章
六卿
|
1月前
|
前端开发
后端返回图片二进制流，前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式，以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`，然后使用`btoa`和`Uint8Array`进行转换。
六卿
137 5
龙大吉
|
27天前
|
前端开发 API UED
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
Python后端与前端交互新纪元：AJAX、Fetch API联手，打造极致用户体验！
龙大吉
69 2
dream_ready
|
15天前
|
JSON 前端开发 Java
震惊！图文并茂——Java后端如何响应不同格式的数据给前端（带源码）
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端，包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
dream_ready
62 1
震惊！图文并茂——Java后端如何响应不同格式的数据给前端（带源码）
java冯坚持
|
7天前
|
前端开发 小程序 Java
java基础：map遍历使用；java使用 Patten 和Matches 进行正则匹配；后端传到前端展示图片三种情况，并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配，以及后端向前端传输图片并保存到手机的三种情况。
java冯坚持
11 1
你都不懂
|
17天前
|
JavaScript 前端开发 网络架构
Vue前端框架的基础配置Vue前端框架的基础配置
Vue前端框架的基础配置
你都不懂
25 8
dream_ready
|
15天前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码，前端展示并进行session验证（带完整前后端源码）
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证，包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
dream_ready
20 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码，前端展示并进行session验证（带完整前后端源码）
dream_ready
|
15天前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数？后端如何接收前端传过来的参数，传递单个参数，多个参数，对象，数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射，并介绍了前后端参数传递的多种方式，包括传递单个参数、多个参数、对象、数组、集合以及JSON数据，并且涵盖了参数重命名和从URL中获取参数的方法。
dream_ready
19 0
@RequestMapping运用举例(有源码) 前后端如何传递参数？后端如何接收前端传过来的参数，传递单个参数，多个参数，对象，数组/集合(有源码)
java冯坚持
|
7天前
|
前端开发 JavaScript Java
导出excel的两个方式：前端vue+XLSX 导出excel，vue+后端POI 导出excel，并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法，并对比分析了它们的优缺点。
java冯坚持
114 0
游客hweaijo5tan62
|
8天前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码？
圈子系统系统基于TP6+Uni-app框架开发；客户移动端采用uni-app开发，管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步，可快速打包生成APP
游客hweaijo5tan62
12 0
明弟有理想
|
8天前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架，包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例，从配置文件到控制器、服务层和数据访问层的实现，帮助开发者快速理解和应用。
明弟有理想
17 0

热门文章

最新文章

  • 1
    我的架构经验系列文章 - 后端架构 - 设计层面
  • 2
    OSS对象存储后端实现+Vue实现图片上传【基于若依管理系统开发】
  • 3
    nginx反代varnish缓存服务器实现后端amp动静分离架构
  • 4
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 5
    Sentry(v20.12.1) K8S云原生架构探索,玩转前/后端监控与事件日志大数据分析,高性能高可用+可扩展可伸缩集群部署
  • 6
    【nodejs】让nodejs像后端mvc框架（asp.net mvc ）一样处理请求--路由限制及选择篇（2/8）【route】
  • 7
    前端，测试如何修改后端接口返回的响应数据
  • 8
    微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
  • 9
    使用(Python)FastAPI快速构建你的后端接口服务
  • 10
    后端码农谈前端（CSS篇）第七课：定位与浮动
  • 1
    BoostCompass( http_server 模块 | 项目前端代码 )
    59
  • 2
    java测试链接超时返回前端
    50
  • 3
    前端自动化测试中的快照测试原理
    85
  • 4
    如何优化前端网页加载速度
    75
  • 5
    前端布局方式及其优缺点
    53
  • 6
    前端算法之基数排序
    38
  • 7
    前端算法之桶排序
    27
  • 8
    前端算法之计数排序
    33
  • 9
    前端算法之堆排序
    37
  • 10
    我们是否对现代前端开发框架过于崇拜了？
    90

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 新平台：优化前端技术栈产品体验新思路
  • 十分钟上线-使用函数计算构建支付宝小程序服务
  • 机器学习在互联网后端技术中的应用

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片