@imgflow/vue/dist/vue.umd.cjs

Vue 3 responsive <Picture> component using vite-imagetools & LQIP, no CDN

(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.ImgflowVue={},t.Vue))})(this,function(t,e){"use strict";const u={key:0},f=["srcset"],p=["src","alt","loading","decoding","width","height"],c={__name:"Pic",props:{src:{type:String,required:!0},alt:{type:String,default:""},loading:{type:String,default:"lazy"},decoding:{type:String,default:"async"}},setup(n){const l=n,o=e.ref(null),i=e.ref(null);return e.onMounted(async()=>{const a="?w=500;700;900;1200&format=webp&as=srcset",s="?lqip",d=await import(l.src+a),r=await import(l.src+s);o.value=d.default||d,i.value=r.default||r}),(a,s)=>o.value&&i.value?(e.openBlock(),e.createElementBlock("picture",u,[e.createElementVNode("source",{srcset:o.value,type:"image/webp"},null,8,f),e.createElementVNode("img",{src:i.value,alt:n.alt,loading:n.loading,decoding:n.decoding,width:i.value.width,height:i.value.height},null,8,p)])):e.createCommentVNode("",!0)}},g={install(n){n.component("Pic",c)}};t.Pic=c,t.default=g,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});