Vite Vue-3 - 项目@不适用于 srcset

Posted 2023-02-22

【中文标题】Vite Vue-3 - 项目@不适用于 srcset

【英文标题】：Vite Vue-3 - project @ not working for srcset

【发布时间】：2021-07-30 22:48:15

【问题描述】：

我按照this 解决方案使别名@ 工作：

我的 vite.config.js：

import  defineConfig  from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig(
  plugins: [vue()],
  resolve: 
    alias: [
       find: '@', replacement: path.resolve(__dirname, 'src') 
    ],
  ,
)

这行得通：

<img src="@/assets/logo.png">

这不起作用：

<img src="@/assets/logo.png" srcset="@/assets/[e-mail] 2x">

这是我在浏览器中的输出：

<img
  src="/src/assets/logo.png"
  srcset="/src/views/@/assets/[e-mail] 2x"
>

【参考方案1】：

看起来@vue/compiler-sfc 有一个错误，在v3.0.0-beta.9 adding support for absolute URLs in srcset 时引入。这个错误绕过了transformation that would've resolved the asset URLs in srcset。 （在 GitHub 问题 vuejs/vue-next#4819 中报告）

我发现的一种解决方法是手动创建 srcset 并明确解析资产 URL：

<template>
  <img :srcset="srcset" />
</template>

<script setup>
import logo2x from '@/assets/[e-mail]'
import logo3x from '@/assets/[e-mail]'

const srcset = `$logo2x 2x, $logo3x 3x`
</script>

或者使用动态导入，如果您需要动态更新srcset，这可能会有所帮助：

<template>
  <img :srcset="srcset" />
</template>

<script setup>
import  ref  from 'vue'

const srcset = ref(null)
Promise.all([
  import('@/assets/[e-mail]'),
  import('@/assets/[e-mail]')
]).then(([ default: logo2x ,  default: logo3x ]) => 
  srcset.value = `$logo2x 2x, $logo3x 3x`
)
</script>

【讨论】：

这个问题是否知道或已报告给 vite 团队？很快会有什么简单的解决方法吗？

@Syed 我在github.com/vuejs/vue-next/issues/4819中报告了这个错误

【参考方案2】：

除非您不是很明确地将图像保存在 ./src/assets/images 文件夹中，否则有一个简单的解决方法，即将您的图像移动到 ./public/assets/image 文件夹并引用它：

<img src="/assets/images/img-01.png"
     srcset="/assets/images/[e-mail] 2x">

【参考方案3】：

您是否尝试过使用 srcset 的 v 绑定。

<img 
  src="@/assets/logo.png" 
  :srcset="require('@/assets/[e-mail]') + ' 2x'"/>

【讨论】：

感谢您的帮助，但这并没有帮助。我收到此错误：Uncaught (in promise) ReferenceError: require is not defined 和更多我正在寻找不使用 require() 的解决方案。