Vuetify v-img调用S3 URL自动编码致404，如何禁用编码？

方法1：用v-img插槽插入原生img标签 #

Vuetify的v-img组件会自动编码URL，导致特殊字符文件名匹配失败。可以绕过组件的src处理逻辑，直接在默认插槽里放置原生<img>标签，利用浏览器原生URL解析规则：

<v-img class="text-left" @click="toggle">
  <template #default>
    <img :src="`https://my-s3-bucket-url.s3.us-east-2.amazonaws.com/${ item }`" alt="图片" />
  </template>
</v-img>

方法2：统一文件名的Unicode规范化格式 #

问题本质是Vue自动将文件名的Unicode字符转为**NFD（分解形式）编码，而S3存储的是NFC（合成形式）**文件名。先将文件名转为NFC格式再构建URL，确保编码后和S3的文件名一致：

<v-img
  :src="`https://my-s3-bucket-url.s3.us-east-2.amazonaws.com/${ encodeURIComponent(item.normalize('NFC')) }`"
  class="text-left"
  @click="toggle"
>

方法3：通过Object URL加载图片 #

如果前两种方法无效，可通过fetch获取图片Blob并生成Object URL，完全避开URL编码问题：

<template>
  <v-img :src="imageUrl" class="text-left" @click="toggle"></v-img>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue'

const props = defineProps({
  item: String
})

const imageUrl = ref('')

watch(() => props.item, async (fileName) => {
  if (!fileName) return
  const rawUrl = `https://my-s3-bucket-url.s3.us-east-2.amazonaws.com/${fileName}`
  try {
    const res = await fetch(rawUrl)
    const blob = await res.blob()
    if (imageUrl.value) URL.revokeObjectURL(imageUrl.value)
    imageUrl.value = URL.createObjectURL(blob)
  } catch (err) {
    console.error('图片加载失败:', err)
  }
}, { immediate: true })

onUnmounted(() => {
  if (imageUrl.value) URL.revokeObjectURL(imageUrl.value)
})
</script>

内容的提问来源于stack exchange，提问作者Sorg