diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6219d813..4891cb01 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -51,5 +51,7 @@
   "i18n-ally.extract.ignored": [
     "•\n              {{\n                t(\"tap-moi-chieu-vao-_time-_day\", [\n                  dayjs(\n                    new Date(\n                      `${currentDataSeason.update[1]}:${currentDataSeason.update[2]} 1/1/0`\n                    )\n                  ).format(\"HH:MM\"),\n                  currentDataSeason.update[0] === 0\n                    ? \"chủ nhật\"\n                    : `thứ ${currentDataSeason.update[0]}`,\n                  currentDataSeason.update[0] > new Date().getDay() + 1\n                    ? \"tuần sau\"\n                    : \"tuần này\",\n                ])\n              }}\n            ",
     "Urban VPN"
-  ]
+  ],
+  "editor.tabCompletion": "on",
+  "diffEditor.codeLens": true
 }
diff --git a/src/components/Card.vue b/src/components/Card.vue
index 3c658dc4..98707627 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -6,7 +6,7 @@
       class="bg-transparent"
       @mousemove="data.description ? (eventMouseoverCard = $event) : undefined"
     >
-      <q-img
+      <q-img-custom
         no-spinner
         :src="forceHttp2(data.image)"
         referrerpolicy="no-referrer"
@@ -37,7 +37,7 @@
           >{{ data.quality }}</Quality
         >
         <img v-if="trending" :src="ranks[trending - 1]" class="h-[1.5rem]" />
-      </q-img>
+      </q-img-custom>
       <span v-if="!trending" class="a line-clamp-2 min-h-10 mt-1">{{
         data.name
       }}</span>
@@ -118,7 +118,9 @@
 import type { MaybeComputedRef } from "@vueuse/core"
 import { useElementHover } from "@vueuse/core"
 import BottomBlur from "components/BottomBlur.vue"
-import { debounce, QCard, QCardSection, QImg, QMenu } from "quasar"
+import QImgCustom from "components/QImgCustom"
+import type { QImg } from "quasar"
+import { debounce, QCard, QCardSection, QMenu } from "quasar"
 import type { TPost } from "src/apis/parser/__helpers__/getInfoTPost"
 import dayjs from "src/logic/dayjs"
 import { forceHttp2 } from "src/logic/forceHttp2"
diff --git a/src/components/CardVertical.vue b/src/components/CardVertical.vue
index 4a1cc0c6..b8a871ba 100644
--- a/src/components/CardVertical.vue
+++ b/src/components/CardVertical.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link :to="data.path" v-ripple class="relative flex flex-nowrap">
     <div>
-      <q-img
+      <q-img-custom
         no-spinner
         :src="forceHttp2(data.image)"
         referrerpolicy="no-referrer"
@@ -10,7 +10,7 @@
         class="rounded-lg"
       >
         <slot name="img-content" />
-      </q-img>
+      </q-img-custom>
     </div>
 
     <div class="flex-1 h-full overflow-hidden pl-3 py-[3px] text-[#9a9a9a]">
@@ -64,6 +64,7 @@
 
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
+import QImgCustom from "components/QImgCustom"
 import { forceHttp2 } from "src/logic/forceHttp2"
 import { useI18n } from "vue-i18n"
 
diff --git a/src/components/QImgCustom.ts b/src/components/QImgCustom.ts
new file mode 100644
index 00000000..5abcb310
--- /dev/null
+++ b/src/components/QImgCustom.ts
@@ -0,0 +1,401 @@
+/* eslint-disable no-void */
+/* eslint-disable functional/no-let */
+import { QSpinner } from "quasar"
+import { get } from "src/logic/http"
+import type { Ref } from "vue"
+import {
+  computed,
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  Transition,
+  watch,
+} from "vue"
+
+const useRatioProps = {
+  ratio: [String, Number],
+}
+
+function useRatio(
+  props: { ratio?: number | string },
+  naturalRatio: { value: number | string } | undefined
+) {
+  // return ratioStyle
+  return computed(() => {
+    const ratio = Number(
+      props.ratio || (naturalRatio !== void 0 ? naturalRatio.value : void 0)
+    )
+
+    return isNaN(ratio) !== true && ratio > 0
+      ? { paddingBottom: `${100 / ratio}%` }
+      : null
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function hSlot(slot: (() => any) | undefined, otherwise?: any) {
+  return slot !== void 0 ? slot() || otherwise : otherwise
+}
+
+/*
+ * (String)  key       - unique vnode key
+ * (Boolean) condition - should change ONLY when adding/removing directive
+ */
+
+const storeHostnameXHR = new Set<string>()
+function addSrcNeedXHR(src: string) {
+  const { hostname } = new URL(src)
+
+  storeHostnameXHR.add(hostname)
+}
+function checkSrcNeedXHR(src: string) {
+  const { hostname } = new URL(src)
+
+  return storeHostnameXHR.has(hostname)
+}
+
+const defaultRatio = 16 / 9
+
+async function getImageWithXHR(url: string) {
+  const res = await get({
+    url,
+    responseType: "arraybuffer",
+  })
+  // eslint-disable-next-line functional/no-throw-statement
+  if (res.status > 299) throw res
+
+  const src = URL.createObjectURL(new Blob([res.data as ArrayBuffer]))
+
+  return { src }
+}
+
+export default defineComponent({
+  name: "QImg",
+
+  props: {
+    ...useRatioProps,
+
+    src: String,
+    srcset: String,
+    sizes: String,
+
+    alt: String,
+    crossorigin: String,
+    decoding: String,
+    referrerpolicy: String,
+
+    draggable: Boolean,
+
+    loading: {
+      type: String,
+      default: "lazy",
+    },
+    fetchpriority: {
+      type: String,
+      default: "auto",
+    },
+    width: String,
+    height: String,
+    initialRatio: {
+      type: [Number, String],
+      default: defaultRatio,
+    },
+
+    placeholderSrc: String,
+
+    fit: {
+      type: String,
+      default: "cover",
+    },
+    position: {
+      type: String,
+      default: "50% 50%",
+    },
+
+    imgClass: String,
+    imgStyle: Object,
+
+    noSpinner: Boolean,
+    noNativeMenu: Boolean,
+    noTransition: Boolean,
+
+    spinnerColor: String,
+    spinnerSize: String,
+  },
+
+  emits: ["load", "error"],
+
+  setup(props, { slots, emit }) {
+    const naturalRatio = ref(props.initialRatio)
+    const ratioStyle = useRatio(props, naturalRatio)
+
+    let loadTimer: string | number | NodeJS.Timeout | null | undefined = null
+    let isDestroyed = false
+
+    const images: Ref<{ src: string } | null>[] = [
+      ref(null),
+      ref(getPlaceholderSrc()),
+    ]
+
+    const position = ref(0)
+
+    const isLoading = ref(false)
+    const hasError = ref(false)
+
+    const classes = computed(
+      () => `q-img q-img--${props.noNativeMenu === true ? "no-" : ""}menu`
+    )
+
+    const style = computed(() => ({
+      width: props.width,
+      height: props.height,
+    }))
+
+    const imgClass = computed(
+      () =>
+        `q-img__image ${
+          props.imgClass !== void 0 ? props.imgClass + " " : ""
+        }` +
+        `q-img__image--with${
+          props.noTransition === true ? "out" : ""
+        }-transition`
+    )
+
+    const imgStyle = computed(() => ({
+      ...props.imgStyle,
+      objectFit: props.fit,
+      objectPosition: props.position,
+    }))
+
+    watch(() => getCurrentSrc(), addImage)
+
+    function getCurrentSrc() {
+      return props.src || props.srcset || props.sizes
+        ? {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            src: props.src!,
+            srcset: props.srcset,
+            sizes: props.sizes,
+          }
+        : null
+    }
+
+    function getPlaceholderSrc() {
+      return props.placeholderSrc !== void 0
+        ? { src: props.placeholderSrc }
+        : null
+    }
+
+    async function addImage(imgProps: { src: string } | null) {
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      }
+
+      hasError.value = false
+
+      if (imgProps === null) {
+        isLoading.value = false
+        images[position.value ^ 1].value = getPlaceholderSrc()
+      } else {
+        isLoading.value = true
+      }
+
+      if (imgProps && checkSrcNeedXHR(imgProps.src))
+        images[position.value].value = await getImageWithXHR(imgProps.src)
+      else images[position.value].value = imgProps
+    }
+
+    function onLoad(event: Event) {
+      const target = event.target as HTMLImageElement
+      if (isDestroyed === true) {
+        return
+      }
+
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      }
+
+      naturalRatio.value =
+        target.naturalHeight === 0
+          ? 0.5
+          : target.naturalWidth / target.naturalHeight
+
+      waitForCompleteness(target, 1)
+    }
+
+    function waitForCompleteness(target: HTMLImageElement, count: number) {
+      // protect against running forever
+      if (isDestroyed === true || count === 1000) {
+        return
+      }
+
+      if (target.complete === true) {
+        onReady(target)
+      } else {
+        loadTimer = setTimeout(() => {
+          loadTimer = null
+          waitForCompleteness(target, count + 1)
+        }, 50)
+      }
+    }
+
+    function onReady(img: HTMLImageElement) {
+      if (isDestroyed === true) {
+        return
+      }
+
+      position.value = position.value ^ 1
+      images[position.value].value = null
+      isLoading.value = false
+      hasError.value = false
+      if (img.src.startsWith("blob:")) URL.revokeObjectURL(img.src)
+      emit("load", img.currentSrc || img.src)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async function onError(err: any) {
+      try {
+        const img = err.target as HTMLImageElement
+
+        const res = await get({
+          url: img.currentSrc || img.src,
+          responseType: "arraybuffer",
+        })
+        // eslint-disable-next-line functional/no-throw-statement
+        if (res.status > 299) throw res
+
+        addSrcNeedXHR(img.currentSrc || img.src)
+        addImage(await getImageWithXHR(img.currentSrc || img.src))
+      } catch {
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer)
+          loadTimer = null
+        }
+
+        isLoading.value = false
+        hasError.value = true
+        images[position.value].value = null
+        images[position.value ^ 1].value = getPlaceholderSrc()
+        emit("error", err)
+      }
+    }
+
+    function getImage(index: number) {
+      const img = images[index].value
+
+      const data = {
+        key: "img_" + index,
+        class: imgClass.value,
+        style: imgStyle.value,
+        crossorigin: props.crossorigin,
+        decoding: props.decoding,
+        referrerpolicy: props.referrerpolicy,
+        height: props.height,
+        width: props.width,
+        loading: props.loading,
+        fetchpriority: props.fetchpriority,
+        "aria-hidden": "true",
+        draggable: props.draggable,
+        ...img,
+      }
+
+      if (position.value === index) {
+        data.class += " q-img__image--waiting"
+        Object.assign(data, { onLoad, onError })
+      } else {
+        data.class += " q-img__image--loaded"
+      }
+
+      return h(
+        "div",
+        { class: "q-img__container absolute-full", key: "img" + index },
+        h("img", data)
+      )
+    }
+
+    function getContent() {
+      if (isLoading.value !== true) {
+        return h(
+          "div",
+          {
+            key: "content",
+            class: "q-img__content absolute-full q-anchor--skip",
+          },
+          hSlot(slots[hasError.value === true ? "error" : "default"])
+        )
+      }
+
+      return h(
+        "div",
+        {
+          key: "loading",
+          class: "q-img__loading absolute-full flex flex-center",
+        },
+        slots.loading !== void 0
+          ? slots.loading()
+          : props.noSpinner === true
+          ? void 0
+          : [
+              h(QSpinner, {
+                color: props.spinnerColor,
+                size: props.spinnerSize,
+              }),
+            ]
+      )
+    }
+
+    if (import.meta.env.SSR !== true) {
+      if (typeof window !== "undefined") {
+        onMounted(() => {
+          addImage(getCurrentSrc())
+        })
+      } else {
+        addImage(getCurrentSrc())
+      }
+
+      onBeforeUnmount(() => {
+        isDestroyed = true
+
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer)
+          loadTimer = null
+        }
+      })
+    }
+
+    return () => {
+      const content = []
+
+      if (ratioStyle.value !== null) {
+        content.push(h("div", { key: "filler", style: ratioStyle.value }))
+      }
+
+      if (hasError.value !== true) {
+        if (images[0].value !== null) {
+          content.push(getImage(0))
+        }
+
+        if (images[1].value !== null) {
+          content.push(getImage(1))
+        }
+      }
+
+      content.push(h(Transition, { name: "q-transition--fade" }, getContent))
+
+      return h(
+        "div",
+        {
+          class: classes.value,
+          style: style.value,
+          role: "img",
+          "aria-label": props.alt,
+        },
+        content
+      )
+    }
+  },
+})
diff --git a/src/components/errors/cloudflare.vue b/src/components/errors/cloudflare.vue
index 913de133..43d75761 100644
--- a/src/components/errors/cloudflare.vue
+++ b/src/components/errors/cloudflare.vue
@@ -1,59 +1,29 @@
 <template>
   <div>
-    <transition-group
+    <img
       v-if="!noImage"
-      name="q-transition--fade"
-      tag="div"
-      class="flex items-center justify-center"
+      src="~assets/img_tips_error_not_loin.png"
+      width="240"
+      class="mx-auto"
+    />
+    <div class="text-h4 mt-4">{{ t("ban-la-robot") }}</div>
+
+    <div
+      class="text-h6 text-[16px] px-2 leading-normal text-gray-200 text-weight-regular mt-4"
     >
-      <Icon
-        v-if="rand === 0"
-        icon="vscode-icons:file-type-aurelia"
-        width="84"
-        height="84"
-      />
-
-      <Icon
-        v-else-if="rand === 1"
-        icon="vscode-icons:file-type-playwright"
-        width="84"
-        height="84"
-      />
-
-      <Icon v-else icon="vscode-icons:file-type-ovpn" width="84" height="84" />
-    </transition-group>
-
-    <div class="text-h4 mt-4">
-      {{ t("ip-cua-ban-toi-tu-quoc-gia-chua-duoc-ho-tro") }}
-    </div>
-
-    <div class="text-h6 text-weight-regular mt-4">
-      <p class="opacity-40">
-        {{ t("msg-caption-country-not-support") }}
-      </p>
-
-      <p class="mt-3 text-gray-400 text-weight-medium">
-        {{ t("ban-co-the-su-dung") }}
-        <a
-          href="https://chrome.google.com/webstore/detail/urban-vpn-proxy/eppiocemhmnlbhjplcgkofciiegomcon"
-          target="_blank"
-          class="text-blue"
-          >Urban VPN</a
-        >
-        {{ t("la-mot-vpn-mien-phi") }}
-      </p>
-
-      <div v-if="myip">
-        <span class="text-weight-medium text-gray-500"
-          >{{ t("ip-cua-ban") }}
-        </span>
-        {{ myip.ip }} ({{ myip.country }}
-        <img
-          :src="`https://flagsapi.com/${myip.cc.toUpperCase()}/flat/64.png`"
-          :ratio="1"
-          class="inline h-7"
-        />)
+      {{
+        t(
+          "yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai"
+        )
+      }}
+      <div class="mt-2">
+        <q-btn rounded outline no-caps color="blue" @click="openAnimeVietsub">{{
+          t("mo-animevietsub-de-xac-thuc")
+        }}</q-btn>
       </div>
+      <small class="mt-3 text-[12px] text-gray-400">{{
+        t("sau-khi-xac-thuc-hay-nhan-vao-nut-ben-duoi")
+      }}</small>
     </div>
 
     <q-btn
@@ -69,10 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Icon } from "@iconify/vue"
-import { computedAsync, useIntervalFn } from "@vueuse/core"
-import { get } from "src/logic/http"
-import { ref } from "vue"
+import { C_URL } from "src/constants"
 import { useI18n } from "vue-i18n"
 
 defineProps<{
@@ -82,28 +49,9 @@ defineProps<{
 
 const { t } = useI18n()
 
-const rand = ref(Math.round(Math.random() * 2))
-useIntervalFn(() => {
-  rand.value = Math.round(Math.random() * 3)
-}, 3_000)
-
-const myip = computedAsync<{
-  ip: string
-  country: string
-  cc: string
-} | null>(() => {
-  return fetch("https://api.myip.com/")
-    .then((res) => {
-      if (res.ok) return res.json()
-      return null
-    })
-    .catch(() => {
-      return get({
-        url: "https://api.myip.com/",
-        // eslint-disable-next-line promise/no-nesting
-      }).then((res) => JSON.parse(res.data))
-    })
-}, null)
+function openAnimeVietsub() {
+  window.open(C_URL)
+}
 </script>
 
 <style></style>
diff --git a/src/components/pagination/InfiniteScroll.vue b/src/components/pagination/InfiniteScroll.vue
index 2ae7cb96..377594cb 100644
--- a/src/components/pagination/InfiniteScroll.vue
+++ b/src/components/pagination/InfiniteScroll.vue
@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { QInfiniteScroll } from "quasar"
 import { useSettingsStore } from "stores/settings"
-import { defineExpose, ref } from "vue"
+import { ref } from "vue"
 
 const settingsStore = useSettingsStore()
 const infiniteScrollRef = ref<QInfiniteScroll>()
diff --git a/src/global.d.ts b/src/global.d.ts
index 3614dfc0..8b54b48e 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -12,7 +12,7 @@ interface PostOptions {
 
 interface HttpResponse<ResponseType extends "arraybuffer" | undefined> {
   headers: Record<string, string>
-  data: string
+  data: ResponseType extends "arraybuffer" ? ArrayBuffer : string
   url: string
   status: number
 }
diff --git a/src/i18n/messages/en-US.json b/src/i18n/messages/en-US.json
index 77ec6b32..2496474f 100644
--- a/src/i18n/messages/en-US.json
+++ b/src/i18n/messages/en-US.json
@@ -246,5 +246,10 @@
   "xoa-khoi-danh-sach-phat": "Remove from playlist",
   "yeu-cau-dang-nhap-lai": "Requires re-login",
   "yeu-thich": "Favourite",
-  "may-chu-phat": "Broadcast server"
+  "may-chu-phat": "Broadcast server",
+  "ban-la-robot": "Are you a Robot?",
+  "mo-animevietsub-de-xac-thuc": "Open AnimeVietsub to authenticate",
+  "sau-khi-xac-thuc-hay-nhan-vao-nut-ben-duoi": "After verifying please click the button below",
+  "t-yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "{0}",
+  "yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "Request sent to server suspected to be robot, please verify you are human and try again."
 }
diff --git a/src/i18n/messages/ja-JP.json b/src/i18n/messages/ja-JP.json
index cadf60f4..b2b1b77e 100644
--- a/src/i18n/messages/ja-JP.json
+++ b/src/i18n/messages/ja-JP.json
@@ -246,5 +246,10 @@
   "xoa-khoi-danh-sach-phat": "プレイリストから削除",
   "yeu-cau-dang-nhap-lai": "再ログインが必要",
   "yeu-thich": "お気に入り",
-  "may-chu-phat": "ブロードキャスト サーバー"
+  "may-chu-phat": "ブロードキャスト サーバー",
+  "ban-la-robot": "あなたはロボットですか？",
+  "mo-animevietsub-de-xac-thuc": "AnimeVietsub を開いて認証します",
+  "sau-khi-xac-thuc-hay-nhan-vao-nut-ben-duoi": "ご確認の上、下のボタンをクリックしてください",
+  "t-yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "{0}",
+  "yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "ロボットであると思われるサーバーにリクエストが送信されました。人間であることを確認して、もう一度お試しください。"
 }
diff --git a/src/i18n/messages/vi-VN.json b/src/i18n/messages/vi-VN.json
index a35269c7..90fdaebb 100644
--- a/src/i18n/messages/vi-VN.json
+++ b/src/i18n/messages/vi-VN.json
@@ -246,5 +246,10 @@
   "xoa-khoi-danh-sach-phat": "Xóa khỏi danh sách phát",
   "yeu-cau-dang-nhap-lai": "Yêu cầu đăng nhập lại",
   "yeu-thich": "Yêu thích",
-  "may-chu-phat": "Máy chủ phát"
+  "may-chu-phat": "Máy chủ phát",
+  "ban-la-robot": "Bạn là Robot?",
+  "yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "Yêu cầu gửi tới máy chủ bị nghi ngờ là robot vui lòng xác thực bạn là con người và thử lại.",
+  "t-yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "{0}",
+  "mo-animevietsub-de-xac-thuc": "Mở AnimeVietsub để xác thực",
+  "sau-khi-xac-thuc-hay-nhan-vao-nut-ben-duoi": "Sau khi xác thực hãy nhấn vào nút bên dưới"
 }
diff --git a/src/i18n/messages/zh-CN.json b/src/i18n/messages/zh-CN.json
index 5c040b71..09398799 100644
--- a/src/i18n/messages/zh-CN.json
+++ b/src/i18n/messages/zh-CN.json
@@ -246,5 +246,10 @@
   "xoa-khoi-danh-sach-phat": "从播放列表中删除",
   "yeu-cau-dang-nhap-lai": "需要重新登录",
   "yeu-thich": "最喜欢的",
-  "may-chu-phat": "广播服务器"
+  "may-chu-phat": "广播服务器",
+  "ban-la-robot": "你是机器人吗？",
+  "mo-animevietsub-de-xac-thuc": "打开 AnimeVietsub 进行身份验证",
+  "sau-khi-xac-thuc-hay-nhan-vao-nut-ben-duoi": "确认无误后请点击下方按钮",
+  "t-yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "{0}",
+  "yeu-cau-gui-toi-may-chu-bi-nghi-ngo-la-robot-vui-long-xac-thuc-ban-la-con-nguoi-va-thu-lai": "请求发送到怀疑是机器人的服务器，请确认您是人类并重试。"
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index febce449..026456fa 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -108,7 +108,7 @@
                   @click="saveAnalytics"
                 >
                   <div>
-                    <q-img
+                    <q-img-custom
                       :ratio="267 / 400"
                       :src="forceHttp2(item.image)"
                       referrerpolicy="no-referrer"
@@ -425,7 +425,7 @@
                       )}-${item.last.chap}`"
                     >
                       <div class="w-[149px]">
-                        <q-img
+                        <q-img-custom
                           no-spinner
                           :src="forceHttp2(item.poster)"
                           referrerpolicy="no-referrer"
@@ -448,7 +448,7 @@
                             class="absolute text-white z-10 text-[12px] bottom-2 right-2"
                             >{{ parseTime(item.last.cur) }}</span
                           >
-                        </q-img>
+                        </q-img-custom>
                       </div>
 
                       <div class="pl-2 flex-1">
@@ -571,7 +571,7 @@
                       </q-item-section>
                       <q-item-section side>
                         <div class="flex flex-nowrap">
-                          <q-img
+                          <q-img-custom
                             no-spinner
                             :src="forceHttp2(item.image!)"
                             referrerpolicy="no-referrer"
@@ -1102,6 +1102,7 @@ import { useEventListener } from "@vueuse/core"
 import { installed as extensionHelperInstalled } from "boot/installed-extension"
 import BottomBlur from "components/BottomBlur.vue"
 import CardVertical from "components/CardVertical.vue"
+import QImgCustom from "components/QImgCustom"
 import SkeletonCardVertical from "components/SkeletonCardVertical.vue"
 import { debounce, QInput, useQuasar } from "quasar"
 import semverGt from "semver/functions/gt"
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 01c46844..d79583f6 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -85,7 +85,7 @@
         v-ripple
         @click="router.push(item.path)"
       >
-        <q-img
+        <q-img-custom
           no-spinner
           :ratio="aspectRatio"
           :src="forceHttp2(item.image!)"
@@ -342,12 +342,11 @@
 import { Icon } from "@iconify/vue"
 import { useHead } from "@vueuse/head"
 import Card from "components/Card.vue"
-// eslint-disable-next-line import/order
-import { useRequest } from "vue-request"
-// eslint-disable-next-line import/order
-import Star from "components/Star.vue"
 import GridCard from "components/GridCard.vue"
+import QImgCustom from "components/QImgCustom"
 import Quality from "components/Quality.vue"
+// eslint-disable-next-line import/order
+import Star from "components/Star.vue"
 import ScreenError from "components/ScreenError.vue"
 import SkeletonCard from "components/SkeletonCard.vue"
 import SkeletonGridCard from "components/SkeletonGridCard.vue"
@@ -359,6 +358,7 @@ import { Autoplay, Navigation } from "swiper"
 import { Swiper, SwiperSlide } from "swiper/vue"
 import { computed } from "vue"
 import { useI18n } from "vue-i18n"
+import { useRequest } from "vue-request"
 import { useRouter } from "vue-router"
 // Import Swiper styles
 import "swiper/css"
diff --git a/src/pages/news.vue b/src/pages/news.vue
index 431857b7..f388eb18 100644
--- a/src/pages/news.vue
+++ b/src/pages/news.vue
@@ -108,7 +108,7 @@
       @click="open(item.href)"
     >
       <div>
-        <q-img
+        <q-img-custom
           no-spinner
           :src="forceHttp2(item.image)"
           referrerpolicy="no-referrer"
@@ -148,6 +148,7 @@
 <script lang="ts" setup>
 import "dayjs/locale/vi"
 import { Icon } from "@iconify/vue"
+import QImgCustom from "components/QImgCustom"
 import { QInfiniteScroll } from "quasar"
 import { NewsAnime } from "src/apis/runs/news-anime"
 import dayjs from "src/logic/dayjs"
diff --git a/src/pages/notification.vue b/src/pages/notification.vue
index e235571c..07048668 100644
--- a/src/pages/notification.vue
+++ b/src/pages/notification.vue
@@ -45,7 +45,7 @@
                 <q-item-label class="text-grey">{{ item.time }}</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-img
+                <q-img-custom
                   no-spinner
                   :src="forceHttp2(item.image!)"
                   referrerpolicy="no-referrer"
@@ -102,6 +102,7 @@
 
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
+import QImgCustom from "components/QImgCustom"
 import ScreenLoading from "src/components/ScreenLoading.vue"
 import { forceHttp2 } from "src/logic/forceHttp2"
 import { useAuthStore } from "stores/auth"
diff --git a/src/pages/phim/_season.vue b/src/pages/phim/_season.vue
index ff560fe8..c9678664 100644
--- a/src/pages/phim/_season.vue
+++ b/src/pages/phim/_season.vue
@@ -46,7 +46,7 @@
         v-else
         class="w-full overflow-hidden bg-[#000] focus-visible:outline-none select-none"
       >
-        <q-img
+        <q-img-custom
           no-spinner
           v-if="!sources?.[0]?.file"
           :ratio="841 / 483"
@@ -320,7 +320,7 @@
       <div class="mt-5 text-[#eee] text-[16px]">{{ t("gioi-thieu") }}</div>
       <div class="flex mt-3">
         <div>
-          <q-img
+          <q-img-custom
             v-if="data?.image"
             width="152px"
             class="rounded-xl"
@@ -409,6 +409,7 @@ import AddToPlaylist from "components/AddToPlaylist.vue"
 import BrtPlayer from "components/BrtPlayer.vue"
 import CardVertical from "components/CardVertical.vue"
 import FragmentChaps from "components/FragmentChaps.vue"
+import QImgCustom from "components/QImgCustom"
 import Quality from "components/Quality.vue"
 import ScreenError from "components/ScreenError.vue"
 import SkeletonCardVertical from "components/SkeletonCardVertical.vue"
diff --git a/src/pages/playlist/[playlist].vue b/src/pages/playlist/[playlist].vue
index 25aec757..83c477f7 100644
--- a/src/pages/playlist/[playlist].vue
+++ b/src/pages/playlist/[playlist].vue
@@ -30,7 +30,7 @@
           </div>
 
           <div class="relative z-2">
-            <q-img
+            <q-img-custom
               v-if="metaPlaylist.poster"
               class="rounded-xl"
               :src="forceHttp2(metaPlaylist.poster)"
@@ -252,7 +252,7 @@
           }`"
         >
           <div>
-            <q-img
+            <q-img-custom
               no-spinner
               :src="forceHttp2(item.poster)"
               referrerpolicy="no-referrer"
@@ -365,6 +365,7 @@
 import { Icon } from "@iconify/vue"
 import { useHead } from "@vueuse/head"
 import AddToPlaylist from "components/AddToPlaylist.vue"
+import QImgCustom from "components/QImgCustom"
 import { QInfiniteScroll, useQuasar } from "quasar"
 import dayjs from "src/logic/dayjs"
 import { forceHttp2 } from "src/logic/forceHttp2"
diff --git a/src/pages/tai-khoan/history.vue b/src/pages/tai-khoan/history.vue
index 5f7dde80..230ba79f 100644
--- a/src/pages/tai-khoan/history.vue
+++ b/src/pages/tai-khoan/history.vue
@@ -34,7 +34,7 @@
               item.last.name
             )}-${item.last.chap}`"
           >
-            <q-img
+            <q-img-custom
               no-spinner
               :src="forceHttp2(item.poster)"
               referrerpolicy="no-referrer"
@@ -57,7 +57,7 @@
                 class="absolute text-white z-10 text-[12px] bottom-2 right-2"
                 >{{ parseTime(item.last.cur) }}</span
               >
-            </q-img>
+            </q-img-custom>
 
             <div class="pl-2">
               <span class="line-clamp-3 mt-1">{{ item.name }}</span>
@@ -95,6 +95,7 @@
 <script lang="ts" setup>
 import { useHead } from "@vueuse/head"
 import BottomBlur from "components/BottomBlur.vue"
+import QImgCustom from "components/QImgCustom"
 import ScreenError from "components/ScreenError.vue"
 import ScreenLoading from "components/ScreenLoading.vue"
 import ScreenNotFound from "components/ScreenNotFound.vue"
diff --git a/src/pages/tai-khoan/index.vue b/src/pages/tai-khoan/index.vue
index d02d42d3..8b0b99cc 100644
--- a/src/pages/tai-khoan/index.vue
+++ b/src/pages/tai-khoan/index.vue
@@ -108,7 +108,7 @@
             )
           "
         >
-          <q-img
+          <q-img-custom
             no-spinner
             :src="forceHttp2(item.poster)"
             referrerpolicy="no-referrer"
@@ -131,7 +131,7 @@
               class="absolute text-white z-10 text-[12px] bottom-2 right-2"
               >{{ parseTime(item.last.cur) }}</span
             >
-          </q-img>
+          </q-img-custom>
 
           <span class="line-clamp-2 min-h-10 mt-1">{{ item.name }}</span>
           <div class="text-grey">
@@ -329,6 +329,7 @@
 import { Icon } from "@iconify/vue"
 import BottomBlur from "components/BottomBlur.vue"
 import Card from "components/Card.vue"
+import QImgCustom from "components/QImgCustom"
 import ScreenError from "components/ScreenError.vue"
 import SkeletonCard from "components/SkeletonCard.vue"
 import { compressToBase64 } from "lz-string"