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

插件名称：vue-sensitive-image

发布时间：2020年5月30日

插件作者：HCESrl

官网演示 GitHub下载

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’	可能的值：“所有”，“平板电脑”，“智能手机”，“移动设备”。主映像的理想操作模式，如果仅通过“移动”，则将不会生成桌面大小，依此类推。

<<>

下一条>>

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

安装和下载：

使用：

参数

最新插件

相关插件