npm 包 view-img 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发过程中，我们经常需要使用图片展示功能来丰富我们的网页内容，但是在实际开发中，经常会出现一些问题，比如图片大小不一致，图片显示不全等，这些问题常常需要通过一些前端技术才能解决。本文介绍的 npm 包 view-img 就是解决图片问题的一个好帮手。

什么是 view-img

view-img 是一个可以将多张图片进行排版并展示的 npm 包，它可以自适应图片大小，并支持缩略图预览功能，非常适合用于图片展示。

这个 npm 包是由 LiuYAuthor 开发，并在 Github 上开源。

如何使用 view-img

安装 view-img

使用 npm 命令进行安装：

npm install --save view-img

引入 view-img

// es6 模块引入方式
import ViewImg from 'view-img';

// commonjs 引入方式
const ViewImg = require('view-img');

使用 view-img

const viewImg = new ViewImg({
  images: ['url1', 'url2', 'url3'],
});

// 在需要展示的位置插入 viewImg 的 DOM
document.getElementById('container').appendChild(viewImg.dom);

API

images：类型为数组，传入需要展示的图片的 URL 地址
thumbBottom：类型为数字，表示缩略图距离底部的高度，默认值为 10
thumbWidth：类型为数字，表示缩略图的宽度，默认值为 80
thumbHeight：类型为数字，表示缩略图的高度，默认值为 80
showThumb：类型为布尔值，表示是否展示缩略图，默认值为 true
thumbNum：类型为数字，表示需要展示的缩略图数量，默认值为 5
onClick：类型为函数，表示点击某张图片时的回调函数

示例代码

-- -------------------- ---- -------
---- ---------------------

------- --------------
  ------ ------- ---- -----------

  ----- ------- - --- ---------
    ------- -
      -------------------------------------
      -------------------------------------
      -------------------------------------
      -------------------------------------
      -------------------------------------
      -------------------------------------
      -------------------------------------
      -------------------------------------
      -------------------------------------
      --------------------------------------
    --
  ---

  --------------------------------------------------------------
---------

以上示例代码会展示 10 张随机图片，并自适应图片大小，并且默认展示 5 张缩略图。

结语

通过本文的介绍，我们可以学习到如何使用 view-img 这个 npm 包来实现图片展示的功能。view-img 是一个功能强大、易于使用的 npm 包，如果在项目中有图片展示的需求，我们可以选择使用 view-img，从而更加方便地完成图片展示功能，提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005671981e8991b448e36e0