> 웹 프론트엔드 > JS 튜토리얼 > 레이어 프런트 엔드 구성 요소는 이미지 표시 기능 방법을 구현합니다.

레이어 프런트 엔드 구성 요소는 이미지 표시 기능 방법을 구현합니다.

小云云
풀어 주다: 2018-01-29 10:39:27
원래의
1822명이 탐색했습니다.

이 글에서는 Layui에서 레이어 프론트엔드 컴포넌트의 이미지 표시 기능을 구현하는 방법을 주로 소개하며, 이미지 표시 기능을 호출하기 위해 Layui에서 레이어 컴포넌트의 동작 방식과 관련 주의사항을 예시 형태로 설명합니다. 필요한 분들을 위해 레이어 및 Layui 소스코드 다운로드도 제공하고 있으니 참고하시면 도움이 될 것 같습니다.

이미지 표시 기능을 구현하려면: 레이어

1. 여기에서는 레이어 프런트엔드 구성 요소를 소개합니다.

layer는 뛰어난 평판을 가진 웹 탄력적 레이어 구성 요소이며 모든 수준에 서비스를 제공하기 위해 최선을 다하고 있습니다. . 개발자와 함께라면 귀하의 페이지는 풍부하고 사용자 친화적인 경험을 쉽게 갖게 될 것입니다.

공식 웹사이트 다운로드 주소: http://layer.layui.com/

또는 여기를 클릭하여 이 사이트에서 다운로드하세요.

특정 사용 방법이 있습니다

몇 가지 참고 사항: 레이어 프런트엔드 구성 요소를 사용하기 전에 레이어의 js 파일을 도입해야 합니다.

<script type="text/javascript" src=".../.../layer/layer/layer.js"></script>
<script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>
로그인 후 복사
참고: layer.js 파일은 jquery 다음에 도입되어야 합니다. layer.js는 jquery.js를 기반으로 합니다!

2.json

이미지 표시 기능을 구현하려면 json도 필요합니다.

구체적인 사용법은 다음과 같습니다.

{ //您服务端接口需严格按照下述格式返回
    "status": 1,  //请求的状态,1表示成功,其它表示失败
    "msg": "", //状态提示语
    "title": "",  //相册标题
    "id": number型,  //相册id
    "start": 0, //初始显示的图片序号,默认0
    "data": [  //相册包含的图片,数组格式
      {
        "name": "", //图片名
        "pid": number型, //图片id
        "src": "", //原图地址
        "thumb": "", //缩略图地址
        "area": [638, 851] //原图宽高
      }
    ]
}
로그인 후 복사

StringBuilder str = new StringBuilder();
로그인 후 복사
와 같은 추가 방법을 사용하고 위의 링크를 따라가야 합니다. 정확

최종 반환값은 다음과 같습니다.

return str.toString();
로그인 후 복사
구체적인 사용법은 공식 웹사이트 http://layer.layui.com/

에서도 볼 수 있습니다. 관련 권장 사항:

jQuery 업로드의 간단한 구현에 대한 자세한 예 이미지 표시 미리보기 기능

JS 이미지 제어 구현 크기 표시 방법 [사진 비례 배율 기능]

사진 표시가 포함된 PHP 사진 업로드 클래스_PHP 튜토리얼

위 내용은 레이어 프런트 엔드 구성 요소는 이미지 표시 기능 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿