为所有设备创建响应图像标签

为所有设备创建响应图像标签
插件名称 vue-sensitive-image
发布时间 2020年5月30日
插件作者 HCESrl

Vue响应式图像是Vue组件,如果您有一些自动系统可以生成所需的各种尺寸的图像,Vue组件可让您快速在Vue项目中插入响应式图像标签。

该组件将计算所有信号源的大小,并根据传递的参数生成适当的<img> 标签及其  srcset 属性,并在需要时生成  <source> 用于平板电脑人像和智能手机视图的单独  标签。

安装和下载:

# NPM
$ npm install vue-responsive-image --save

使用:

VueResponsiveImage必须用作模板中的组件。
最少使用量:

<vue-responsive-image
    :image-url="'http://via.placeholder.com/%width%x%height%'"
    :image-ratio="16/9"
  ></vue-responsive-image>

完整的选项集:

<vue-responsive-image
    :image-url="'http://via.placeholder.com/%width%x%height%'"
    :error-image-url="'https://via.placeholder.com/160x90.png/09f/fff?text=Not+Found'"
    :show-error-image="true"
    :width-on-screen="50"
    :width-on-screen-tablet="75"
    :width-on-screen-smartphone="100"
    :image-ratio="16/9"
    :alt="'test1'"
    :image-class="'vw50'"
    :mode="'all'"
  ></vue-responsive-image>

参数

当前支持以下参数:

参数 默认值
image-url N/a 用于创建图像的基本URL,其宽度和高度占位符将被组件替换。示例:http : //via.placeholder.com/%width%x%height%。%width%和%height%将被替换为每个图像计算出的宽度和高度。
show-error-image false 如果当前图像加载失败,是否显示错误图像而不是损坏的图像
error-image-url N/a 在无法加载图像时显示的图像的URL。它可以是嵌入式SVG。该组件现在可以检测图像加载失败,而不会显示损坏的图像,而是显示错误图像。默认值为灰色背景svg
width-on-screen 100 图像将在布局中占据的屏幕百分比。用于确定图像的srcset的各种大小
width-on-screen-tablet 仅在平板电脑纵向模式下,图像将在布局中占据的屏幕百分比
width-on-screen-smartphone 仅在与默认设置不同的情况下,图像将在智能手机模式下在布局中占据的屏幕百分比
image-ratio 16/9 图片的宽高比,用于确定最终图片的高度
alt 图片的alt属性
class 要添加到图像的额外类。默认情况下,添加了“ vue-reponsive-image”类
mode ‘all’ 可能的值:“所有”,“平板电脑”,“智能手机”,“移动设备”。主映像的理想操作模式,如果仅通过“移动”,则将不会生成桌面大小,依此类推。