Layui의 레이어 프런트 엔드 구성 요소는 그림 표시 기능을 구현합니다.

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

이 문서의 예에서는 레이어 프런트엔드 구성 요소가 이미지 표시 기능을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

이미지 표시 기능 구현: 레이어

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

layer는 뛰어난 평판을 가진 웹 탄력적 레이어 구성 요소입니다.
모든 수준의 개발자에게 서비스를 제공하는 데 전념하는 솔루션으로 귀하의 페이지는 풍부하고 친숙한 운영 경험을 쉽게 갖게 될 것입니다.

여기서 참고할 몇 가지 사항: 레이어 프런트엔드 구성 요소를 사용하기 전에 레이어의 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();

관련 권장 사항:

DOM 작업에서 Vue 및 React의 프런트 엔드 구성 요소화,

Layui 테이블 구성 요소 초기화 데이터 로드 및 기타 자세한 예제 설명을 살펴보세요.

jQuery로 캡슐화된 페이징 구성 요소에 대한 자세한 설명

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