Remove NuxtImg for non asset files

This commit is contained in:
Julien Nahum 2024-01-10 16:17:47 +01:00
parent 158dba64dc
commit 9750406025
17 changed files with 23 additions and 24 deletions

View File

@ -4,7 +4,7 @@
:title="file.file.name" :title="file.file.name"
> >
<div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex"> <div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex">
<NuxtImg class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true"/> <img class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true"/>
</div> </div>
<div v-else class="h-20 flex items-center justify-center"> <div v-else class="h-20 flex items-center justify-center">
<svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"

View File

@ -53,7 +53,7 @@
class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500" class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
dusk="nav-dropdown-button" @click.stop="toggle()" dusk="nav-dropdown-button" @click.stop="toggle()"
> >
<NuxtImg :src="user.photo_url" class="rounded-full w-6 h-6"/> <img :src="user.photo_url" class="rounded-full w-6 h-6"/>
<p class="ml-2 hidden sm:inline"> <p class="ml-2 hidden sm:inline">
{{ user.name }} {{ user.name }}
</p> </p>

View File

@ -6,7 +6,7 @@
<template v-if="workspace" #trigger="{toggle}"> <template v-if="workspace" #trigger="{toggle}">
<div class="flex items-center cursor group" role="button" @click.stop="toggle()"> <div class="flex items-center cursor group" role="button" @click.stop="toggle()">
<div class="rounded-full h-8 8"> <div class="rounded-full h-8 8">
<NuxtImg v-if="isUrl(workspace.icon)" <img v-if="isUrl(workspace.icon)"
:src="workspace.icon" :src="workspace.icon"
:alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow" :alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
/> />
@ -26,7 +26,7 @@
:class="{'bg-blue-100 dark:bg-blue-900':workspace.id === worksp.id}" @click.prevent="switchWorkspace(worksp)" :class="{'bg-blue-100 dark:bg-blue-900':workspace.id === worksp.id}" @click.prevent="switchWorkspace(worksp)"
> >
<div class="rounded-full h-8 w-8 flex-shrink-0" role="button"> <div class="rounded-full h-8 w-8 flex-shrink-0" role="button">
<NuxtImg v-if="isUrl(worksp.icon)" <img v-if="isUrl(worksp.icon)"
:src="worksp.icon" :src="worksp.icon"
:alt="worksp.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow" :alt="worksp.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
/> />

View File

@ -71,7 +71,7 @@
<div v-if="!field.image_block" class="p-4 border border-dashed"> <div v-if="!field.image_block" class="p-4 border border-dashed">
Open <b>{{ field.name }}'s</b> block settings to upload image. Open <b>{{ field.name }}'s</b> block settings to upload image.
</div> </div>
<NuxtImg v-else :alt="field.name" :src="field.image_block" class="max-w-full"/> <img v-else :alt="field.name" :src="field.image_block" class="max-w-full"/>
</div> </div>
</template> </template>
</div> </div>

View File

@ -16,13 +16,13 @@
<div id="cover-picture" <div id="cover-picture"
class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center" class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center"
> >
<NuxtImg alt="Cover Picture" :src="coverPictureSrc(form.cover_picture)" class="w-full"/> <img alt="Cover Picture" :src="coverPictureSrc(form.cover_picture)" class="w-full"/>
</div> </div>
</div> </div>
<div v-if="form.logo_picture" class="w-full mx-auto p-5 relative" <div v-if="form.logo_picture" class="w-full mx-auto p-5 relative"
:class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered')}" :class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered')}"
> >
<NuxtImg alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)" <img alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)"
:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}" :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
class="w-20 h-20 object-contain absolute left-5 transition-all" class="w-20 h-20 object-contain absolute left-5 transition-all"
/> />

View File

@ -8,7 +8,7 @@
rel="nofollow" rel="nofollow"
> >
<div v-if="isImage(file.file_url)" class="w-8 h-8"> <div v-if="isImage(file.file_url)" class="w-8 h-8">
<NuxtImg class="object-cover h-full w-full rounded" :src="file.file_url"/> <img class="object-cover h-full w-full rounded" :src="file.file_url"/>
</div> </div>
<span v-else <span v-else
class="py-1 px-2" class="py-1 px-2"

View File

@ -3,7 +3,7 @@
<h3 class="font-semibold text-xl">QR Code</h3> <h3 class="font-semibold text-xl">QR Code</h3>
<p>Scan the QR code to open the form (Right click to copy the image)</p> <p>Scan the QR code to open the form (Right click to copy the image)</p>
<div class="flex items-center"> <div class="flex items-center">
<NuxtImg v-if="QrUrl" :src="QrUrl" class="m-auto" /> <img v-if="QrUrl" :src="QrUrl" class="m-auto" />
</div> </div>
</div> </div>
</template> </template>
@ -18,7 +18,7 @@ export default {
}, },
data () { data () {
return { return {
QrUrl: null QrUrl: null
} }
}, },

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden"> <div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
<NuxtImg class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" <img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
:src="template.image_url" alt="" :src="template.image_url" alt=""
/> />
</div> </div>

View File

@ -3,7 +3,7 @@
<!-- START HERO --> <!-- START HERO -->
<section class="bg-gradient-to-b relative from-white to-gray-100 py-12 sm:py-16 lg:py-20 xl:py-24"> <section class="bg-gradient-to-b relative from-white to-gray-100 py-12 sm:py-16 lg:py-20 xl:py-24">
<div class="absolute inset-0"> <div class="absolute inset-0">
<NuxtImg class="w-full h-full object-cover object-top" src="/img/pages/ai_form_builder/background-pattern.svg" alt=""/> <img class="w-full h-full object-cover object-top" src="/img/pages/ai_form_builder/background-pattern.svg" alt=""/>
</div> </div>

View File

@ -3,13 +3,13 @@
<div v-if="form && !isIframe && (form.logo_picture || form.cover_picture)"> <div v-if="form && !isIframe && (form.logo_picture || form.cover_picture)">
<div v-if="form.cover_picture"> <div v-if="form.cover_picture">
<div id="cover-picture" class="max-h-56 w-full overflow-hidden flex items-center justify-center"> <div id="cover-picture" class="max-h-56 w-full overflow-hidden flex items-center justify-center">
<NuxtImg alt="Form Cover Picture" :src="form.cover_picture" class="w-full"/> <img alt="Form Cover Picture" :src="form.cover_picture" class="w-full"/>
</div> </div>
</div> </div>
<div v-if="form.logo_picture" class="w-full p-5 relative mx-auto" <div v-if="form.logo_picture" class="w-full p-5 relative mx-auto"
:class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }" :class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }"
> >
<NuxtImg alt="Logo Picture" :src="form.logo_picture" <img alt="Logo Picture" :src="form.logo_picture"
:class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}" :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
class="w-20 h-20 object-contain absolute left-5 transition-all" class="w-20 h-20 object-contain absolute left-5 transition-all"
/> />

View File

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<div v-if="!formsLoading && enrichedForms.length === 0" class="flex flex-wrap justify-center max-w-4xl"> <div v-if="!formsLoading && enrichedForms.length === 0" class="flex flex-wrap justify-center max-w-4xl">
<NuxtImg loading="lazy" class="w-56" <NuxtImg class="w-56"
src="/img/pages/forms/search_notfound.png" alt="search-not-found" src="/img/pages/forms/search_notfound.png" alt="search-not-found"
/> />

View File

@ -2,7 +2,7 @@
<div> <div>
<section class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16 "> <section class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16 ">
<div class="absolute inset-0"> <div class="absolute inset-0">
<NuxtImg class="w-full h-full object-cover object-top" <img class="w-full h-full object-cover object-top"
src="/img/pages/ai_form_builder/background-pattern.svg" alt="Page abstract background" src="/img/pages/ai_form_builder/background-pattern.svg" alt="Page abstract background"
/> />
</div> </div>

View File

@ -25,7 +25,7 @@
<div v-else-if="workspace"> <div v-else-if="workspace">
<div class="mt-4 flex group bg-white items-center"> <div class="mt-4 flex group bg-white items-center">
<div class="flex space-x-4 flex-grow items-center"> <div class="flex space-x-4 flex-grow items-center">
<NuxtImg v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'" <img v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'"
class="rounded-full h-12 w-12" class="rounded-full h-12 w-12"
/> />
<div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden" <div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden"

View File

@ -33,7 +33,7 @@
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl"> <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
<div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row"> <div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
<div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs"> <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs">
<NuxtImg class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110" <img class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110"
:src="template.image_url" alt="Template cover image" :src="template.image_url" alt="Template cover image"
/> />
</div> </div>

View File

@ -23,7 +23,7 @@
import {loadAllTemplates} from "~/stores/templates.js"; import {loadAllTemplates} from "~/stores/templates.js";
defineRouteRules({ defineRouteRules({
swr: 3600 // swr: 3600
}) })
useOpnSeoMeta({ useOpnSeoMeta({

View File

@ -39,7 +39,6 @@
</template> </template>
<script> <script>
import { computed } from 'vue'
import { useTemplatesStore } from '../../../stores/templates' import { useTemplatesStore } from '../../../stores/templates'
import TemplateTags from './TemplateTags.vue' import TemplateTags from './TemplateTags.vue'

View File

@ -44,8 +44,8 @@
</div> </div>
<div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<router-link v-for="row in types" :key="row.slug" <router-link v-for="row in types" :key="row.slug"
:to="{params:{slug:row.slug}, name:'templates.types.show'}" :to="{params:{slug:row.slug}, name:'templates.types.show'}"
:title="row.name" :title="row.name"
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
> >
@ -64,8 +64,8 @@
</div> </div>
<div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<router-link v-for="row in industries" :key="row.slug" <router-link v-for="row in industries" :key="row.slug"
:to="{params:{slug:row.slug}, name:'templates.industries.show'}" :to="{params:{slug:row.slug}, name:'templates.industries.show'}"
:title="row.name" :title="row.name"
class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue" class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
> >