npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-webp2

v1.0.0

Published

A vue directive help you replace img src from .png .jpg to .webp

Downloads

4

Readme

vue-webp2

vue-webp2 是基于vue的webp指令,在判断当前浏览器是否支持webp格式的图片时,如果支持webp则替换图片的src为webp的url。

Usage

$ npm install -save vue-webp2
// in your main.js
import vwebp from 'vue-webp2'
Vue.use(vwebp)

v-webp的值格式包含以下几个值,并通过','链接

  1. imgurl: 默认图片链接
  2. webpurl: webp: + webp格式的图片链接, 可不填,链接默认为 imgurl + '.webp'
  3. errurl: err: + 图片加载失败的链接,可不填
<img v-webp="imgurl[,webp:webpurl][,err:errurl]" />