Le composant frontal de couche implémente la méthode de fonction d'affichage d'image

Cet article présente principalement la méthode de réalisation de la fonction d'affichage d'image du composant frontal de couche dans layui. Il analyse la méthode de fonctionnement et les précautions associées du composant de couche dans layui pour appeler la fonction d'affichage d'image sous forme d'exemples. . Il fournit également des téléchargements de code source de couches et de layui, qui sont nécessaires. Les amis peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Pour implémenter la fonction d'affichage d'image : couche

1 Nous introduisons ici un composant frontal de couche

la couche est un composant de couche élastique Web avec une excellente réputation. toute la solution Fangfang,
est dédiée au service des développeurs à tous les niveaux, et vos pages bénéficieront facilement d'une expérience de fonctionnement riche et conviviale.

Adresse de téléchargement du site officiel : http://layer.layui.com/

Ou cliquez ici pour télécharger à partir de ce site Web.

Il contient des méthodes d'utilisation spécifiques

Quelques points à noter ici : avant d'utiliser le composant frontal de la couche, nous devons introduire le fichier js de la couche

<script type="text/javascript" src=".../.../layer/layer/layer.js"></script>
<script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>

Remarque : layer Le fichier js doit être introduit après jquery, car layer.js est basé sur jquery.js !

2.json

Json est également requis pour implémenter la fonction d'affichage d'image :

L'utilisation spécifique est la suivante :

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

Utiliser un tel comme :

StringBuilder str = new StringBuilder();

suit le lien ci-dessus

et le retour final est le suivant :

return str.toString();

Pour un usage spécifique. , vous pouvez également vous rendre sur le site officiel http:// Voir

dans layer.layui.com/Recommandations associées :

Exemple détaillé d'implémentation simple de l'aperçu de l'affichage de l'image de téléchargement jQuery fonction

Méthodes d'implémentation JS pour contrôler la taille d'affichage des images [Fonction de mise à l'échelle proportionnelle de l'image]

Classe de téléchargement d'images PHP avec tutoriel d'affichage d'image_PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!