图片模块

.htaccess

@@ -0,0 +1 @@
+# 请将伪静态规则或自定义Apache配置填写到此处

.output/nitro.json

@@ -1,7 +1,7 @@
 {
-  "date": "2023-05-31T09:25:54.079Z",
-  "preset": "nitro-prerender",
+  "date": "2023-05-31T16:49:45.951Z",
+  "preset": "node-server",
   "commands": {
-    "preview": "npx serve ./public"
+    "preview": "node ./server/index.mjs"
   }
 }

.output/public/_nuxt/workbox-window.prod.es5.dc90f814.js

@@ -1,2 +0,0 @@
-try{self["workbox:window:6.5.3"]&&_()}catch{}function S(t,r){return new Promise(function(e){var i=new MessageChannel;i.port1.onmessage=function(f){e(f.data)},t.postMessage(r,[i.port2])})}function W(t,r){for(var e=0;e<r.length;e++){var i=r[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function E(t,r){(r==null||r>t.length)&&(r=t.length);for(var e=0,i=new Array(r);e<r;e++)i[e]=t[e];return i}function k(t,r){var e;if(typeof Symbol>"u"||t[Symbol.iterator]==null){if(Array.isArray(t)||(e=function(f,d){if(f){if(typeof f=="string")return E(f,d);var h=Object.prototype.toString.call(f).slice(8,-1);return h==="Object"&&f.constructor&&(h=f.constructor.name),h==="Map"||h==="Set"?Array.from(f):h==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(h)?E(f,d):void 0}}(t))||r&&t&&typeof t.length=="number"){e&&(t=e);var i=0;return function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}return(e=t[Symbol.iterator]()).next.bind(e)}try{self["workbox:core:6.5.3"]&&_()}catch{}var y=function(){var t=this;this.promise=new Promise(function(r,e){t.resolve=r,t.reject=e})};function b(t,r){var e=location.href;return new URL(t,e).href===new URL(r,e).href}var g=function(t,r){this.type=t,Object.assign(this,r)};function p(t,r,e){return e?r?r(t):t:(t&&t.then||(t=Promise.resolve(t)),r?t.then(r):t)}function L(){}var j={type:"SKIP_WAITING"};function P(t,r){if(!r)return t&&t.then?t.then(L):Promise.resolve()}var x=function(t){var r,e;function i(v,c){var n,o;return c===void 0&&(c={}),(n=t.call(this)||this).nn={},n.tn=0,n.rn=new y,n.en=new y,n.on=new y,n.un=0,n.an=new Set,n.cn=function(){var s=n.fn,a=s.installing;n.tn>0||!b(a.scriptURL,n.sn.toString())||performance.now()>n.un+6e4?(n.vn=a,s.removeEventListener("updatefound",n.cn)):(n.hn=a,n.an.add(a),n.rn.resolve(a)),++n.tn,a.addEventListener("statechange",n.ln)},n.ln=function(s){var a=n.fn,u=s.target,l=u.state,m=u===n.vn,w={sw:u,isExternal:m,originalEvent:s};!m&&n.mn&&(w.isUpdate=!0),n.dispatchEvent(new g(l,w)),l==="installed"?n.wn=self.setTimeout(function(){l==="installed"&&a.waiting===u&&n.dispatchEvent(new g("waiting",w))},200):l==="activating"&&(clearTimeout(n.wn),m||n.en.resolve(u))},n.dn=function(s){var a=n.hn,u=a!==navigator.serviceWorker.controller;n.dispatchEvent(new g("controlling",{isExternal:u,originalEvent:s,sw:a,isUpdate:n.mn})),u||n.on.resolve(a)},n.gn=(o=function(s){var a=s.data,u=s.ports,l=s.source;return p(n.getSW(),function(){n.an.has(l)&&n.dispatchEvent(new g("message",{data:a,originalEvent:s,ports:u,sw:l}))})},function(){for(var s=[],a=0;a<arguments.length;a++)s[a]=arguments[a];try{return Promise.resolve(o.apply(this,s))}catch(u){return Promise.reject(u)}}),n.sn=v,n.nn=c,navigator.serviceWorker.addEventListener("message",n.gn),n}e=t,(r=i).prototype=Object.create(e.prototype),r.prototype.constructor=r,r.__proto__=e;var f,d,h=i.prototype;return h.register=function(v){var c=(v===void 0?{}:v).immediate,n=c!==void 0&&c;try{var o=this;return function(s,a){var u=s();return u&&u.then?u.then(a):a(u)}(function(){if(!n&&document.readyState!=="complete")return P(new Promise(function(s){return window.addEventListener("load",s)}))},function(){return o.mn=!!navigator.serviceWorker.controller,o.yn=o.pn(),p(o.bn(),function(s){o.fn=s,o.yn&&(o.hn=o.yn,o.en.resolve(o.yn),o.on.resolve(o.yn),o.yn.addEventListener("statechange",o.ln,{once:!0}));var a=o.fn.waiting;return a&&b(a.scriptURL,o.sn.toString())&&(o.hn=a,Promise.resolve().then(function(){o.dispatchEvent(new g("waiting",{sw:a,wasWaitingBeforeRegister:!0}))}).then(function(){})),o.hn&&(o.rn.resolve(o.hn),o.an.add(o.hn)),o.fn.addEventListener("updatefound",o.cn),navigator.serviceWorker.addEventListener("controllerchange",o.dn),o.fn})})}catch(s){return Promise.reject(s)}},h.update=function(){try{return this.fn?P(this.fn.update()):void 0}catch(v){return Promise.reject(v)}},h.getSW=function(){return this.hn!==void 0?Promise.resolve(this.hn):this.rn.promise},h.messageSW=function(v){try{return p(this.getSW(),function(c){return S(c,v)})}catch(c){return Promise.reject(c)}},h.messageSkipWaiting=function(){this.fn&&this.fn.waiting&&S(this.fn.waiting,j)},h.pn=function(){var v=navigator.serviceWorker.controller;return v&&b(v.scriptURL,this.sn.toString())?v:void 0},h.bn=function(){try{var v=this;return function(c,n){try{var o=c()}catch(s){return n(s)}return o&&o.then?o.then(void 0,n):o}(function(){return p(navigator.serviceWorker.register(v.sn,v.nn),function(c){return v.un=performance.now(),c})},function(c){throw c})}catch(c){return Promise.reject(c)}},f=i,(d=[{key:"active",get:function(){return this.en.promise}},{key:"controlling",get:function(){return this.on.promise}}])&&W(f.prototype,d),i}(function(){function t(){this.Pn=new Map}var r=t.prototype;return r.addEventListener=function(e,i){this.Sn(e).add(i)},r.removeEventListener=function(e,i){this.Sn(e).delete(i)},r.dispatchEvent=function(e){e.target=this;for(var i,f=k(this.Sn(e.type));!(i=f()).done;)(0,i.value)(e)},r.Sn=function(e){return this.Pn.has(e)||this.Pn.set(e,new Set),this.Pn.get(e)},t}());export{x as Workbox,g as WorkboxEvent,S as messageSW};

.output/public/index.html

@@ -6,7 +6,7 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <link rel="icon" href="/favicon.ico" sizes="any">
 <link rel="icon" type="image/svg+xml" href="/topverse.icon.svg">
-<link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.d49da458.js"><link rel="preload" as="style" href="/_nuxt/entry.104134c1.css"><link rel="prefetch" as="script" crossorigin href="/_nuxt/default.8d2a69fe.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/header.4a7ba502.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/logo.646849cc.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/composables.6548458b.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/nuxt-link.56be5577.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/nav.vue.5342d57e.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/LocaleNuxtLink.vue.8254fa98.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.c27b6911.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/Footer.63e76bba.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/Divider.vue.15dcacb6.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/DarkToggle.vue.d9949839.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/home.41466bc9.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/workbox-window.prod.es5.dc90f814.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/en-UK.c678d4d3.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/zh-CN.44764e4b.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/error-component.adb982d2.js"><link rel="stylesheet" href="/_nuxt/entry.104134c1.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
+<link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.d198f791.js"><link rel="preload" as="style" href="/_nuxt/entry.99d4c1c2.css"><link rel="prefetch" as="script" crossorigin href="/_nuxt/default.39bf83d3.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/header.06ae89c2.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/logo.9d86e4f5.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/composables.c8bbe07f.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/nuxt-link.03360346.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/nav.vue.973b2e4c.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/LocaleNuxtLink.vue.930c19b6.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.c27b6911.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/Footer.b80aa5d6.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/Divider.vue.2e772feb.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/DarkToggle.vue.ba80b245.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/home.ed73c6c2.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/workbox-window.prod.es5.08b2315b.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/en-UK.c678d4d3.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/zh-CN.44764e4b.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/error-component.db080e86.js"><link rel="stylesheet" href="/_nuxt/entry.99d4c1c2.css"><script>"use strict";const w=window,de=document.documentElement,knownColorSchemes=["dark","light"],preference=window.localStorage.getItem("nuxt-color-mode")||"system";let value=preference==="system"?getColorScheme():preference;const forcedColorMode=de.getAttribute("data-color-mode-forced");forcedColorMode&&(value=forcedColorMode),addColorScheme(value),w["__NUXT_COLOR_MODE__"]={preference,value,getColorScheme,addColorScheme,removeColorScheme};function addColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.add(o):de.className+=" "+o,t&&de.setAttribute("data-"+t,e)}function removeColorScheme(e){const o=""+e+"",t="";de.classList?de.classList.remove(o):de.className=de.className.replace(new RegExp(o,"g"),""),t&&de.removeAttribute("data-"+t)}function prefersColorScheme(e){return w.matchMedia("(prefers-color-scheme"+e+")")}function getColorScheme(){if(w.matchMedia&&prefersColorScheme("").media!=="not all"){for(const e of knownColorSchemes)if(prefersColorScheme(":"+e).matches)return e}return"light"}
 </script></head>
-<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{i18n:{experimental:{jsTsFormatResource:false},baseUrl:""},content:{locales:[],defaultLocale:"",integrity:1685525130550,experimental:{stripQueryParameters:false,clientDB:true,advancedIgnoresPattern:false},api:{baseURL:"/api/_content"},navigation:{fields:[]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:false,wsUrl:"",documentDriven:false,host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.d49da458.js" crossorigin></script></body>
+<body ><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4},{},false,{},{}]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{i18n:{experimental:{jsTsFormatResource:false},baseUrl:""},content:{locales:[],defaultLocale:"",integrity:1685551685607,experimental:{stripQueryParameters:false,clientDB:false,advancedIgnoresPattern:false},api:{baseURL:"/api/_content"},navigation:{fields:[]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"prose-code",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:false,wsUrl:"",documentDriven:false,host:"",trailingSlash:false,anchorLinks:{depth:4,exclude:[1]}}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="module" src="/_nuxt/entry.d198f791.js" crossorigin></script></body>
 </html>

app.vue

@@ -4,7 +4,7 @@ import { appName } from './constants'
 useHead({
   title: appName,
   bodyAttrs: {
-    class: 'scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-4px scrollbar scrollbar-rounded',
+    class: 'scrollbar-thumb-color-dark-50 scrollbar-track-color-transparent scrollbar-radius-2 scrollbar-thumb-radius-4 scrollbar-w-4px scrollbar scrollbar-rounded [&>div]:overflow-x-hidden',
   },
 })
 usePreferredDark()

components/ImageLoading.vue

@@ -5,19 +5,21 @@ import { useImage } from '@vueuse/core'
 
 const props = $defineProps<{
   src:string
+  errSrc?:string
 }>()
-
+// const isGIF = 
 const avatarUrl = props.src
 const { isLoading,error } = useImage({ src: avatarUrl })
 </script>
 
 <template>
   <div v-if="isLoading" class="animate-pulse w-full h-full bg-slate/10  flex items-center justify-center">
-    Loading
+    <div class="i-line-md-loading-twotone-loop"/>
   </div>
-  <div v-if="error" class="animate-pulse w-full h-full bg-rose/10 flex items-center justify-center">
+  <!-- <div v-if="error" class="animate-pulse w-full h-full bg-rose/10 flex items-center justify-center">
     Error
-  </div>
-  <img v-else :src="avatarUrl" style="object-fit: cover;">
+  </div> -->
+  <img v-else :src="error?errSrc:avatarUrl" style="object-fit: cover;">
+  
 </template>
  

config/pages/home/use-section-six.ts

@@ -12,6 +12,7 @@ export function useSectionSix() {
           href: '#',
         },
         img: '/imgs/Home-Solutions&Services/DigitalTwin.gif',
+        errImg: '/imgs/Home-Solutions&Services/DigitalTwin.jpg',
       },
       {
         title: 'home.sectionSix.content.title[1]',
@@ -22,6 +23,7 @@ export function useSectionSix() {
           href: '#',
         },
         img: '/imgs/Home-Solutions&Services/Circulus.gif',
+        errImg: '/imgs/Home-Solutions&Services/Circulus.jpg',
       },
       {
         title: 'home.sectionSix.content.title[2]',
@@ -32,6 +34,7 @@ export function useSectionSix() {
           href: '#',
         },
         img: '/imgs/Home-Solutions&Services/CyberPink.gif',
+        errImg: '/imgs/Home-Solutions&Services/CyberPink.jpg',
       },
       {
         title: 'home.sectionSix.content.title[3]',
@@ -42,6 +45,7 @@ export function useSectionSix() {
           href: '#',
         },
         img: '/imgs/Home-Solutions&Services/AIGC.gif',
+        errImg: '/imgs/Home-Solutions&Services/AIGC.jpg',
       },
 
     ],

nuxt.config.ts

@@ -19,15 +19,15 @@ export default defineNuxtConfig({
     '@vite-pwa/nuxt',
     // '@aceforth/nuxt-optimized-images',
     // '@vueuse/components',
-    '@nuxt/image-edge',
+    // '@nuxt/image-edge',
     '@nuxt/devtools',
   ],
   
-  content: {
-    experimental: {
-      clientDB: true
-    }
-  },
+  // content: {
+  //   experimental: {
+  //     clientDB: true
+  //   }
+  // },
   image:{
     // provider:"static"
   },

pages/index.vue

@@ -135,7 +135,7 @@ const sectionNine = useSectionNine()
     <div v-for="(item, i) in sectionSix.content" :key="i" class="flex flex-wrap gap-6 py-10 md:flex-nowrap" :class="{ 'flex-row-reverse': i % 2 === 0 }">
       <div class="w-45% flex-grow">
         <div class="relative h-full w-full flex items-center justify-center overflow-hidden border-6px border-dark-50/10 rounded-xl dark:border-light-50/10" style="mask-image:linear-gradient(0deg, transparent, #000);-webkit-mask-image:linear-gradient(0deg, transparent, #000 60%);">
-          <ImageLoading quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/>
+          <ImageLoading quality="20" :src="item.img" :errSrc="item.errImg" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/>
           <!-- <NuxtImg quality="20" :src="item.img" class="h-full w-full" fit="cover" height="300" width="600" loading="lazy"/> -->
         </div>
       </div>