Vite Vue-3 - 项目@不适用于 srcset
Vite Vue-3 - project @ not working for srcset
我按照 解决方案使别名 @ 工作:
我的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/logo@2x.png 2x">
这是我在浏览器中的输出:
<img
src="/src/assets/logo.png"
srcset="/src/views/@/assets/logo@2x.png 2x"
>
您是否尝试使用 srcset
的 v 绑定。
<img
src="@/assets/logo.png"
:srcset="require('@/assets/logo@2x.png') + ' 2x'"/>
看起来 @vue/compiler-sfc
有一个错误,在 v3.0.0-beta.9
时引入 adding support for absolute URLs in srcset
. This bug bypasses the transformation that would've resolved the asset URLs in srcset
. (Reported in GitHub issue vuejs/vue-next#4819
)
我发现的解决方法是手动创建 srcset
并显式解析资产 URL:
<template>
<img :srcset="srcset" />
</template>
<script setup>
import logo2x from '@/assets/logo@2x.png'
import logo3x from '@/assets/logo@3x.png'
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/logo@2x.png'),
import('@/assets/logo@3x.png')
]).then(([{ default: logo2x }, { default: logo3x }]) => {
srcset.value = `${logo2x} 2x, ${logo3x} 3x`
})
</script>
除非您不是很明确要将图像保存在 ./src/assets/images
文件夹中,否则有一个简单的解决方法,就是将图像移动到 ./public/assets/image
文件夹并像这样引用它:
<img src="/assets/images/img-01.png"
srcset="/assets/images/img-01@2x.png 2x">
我按照
我的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/logo@2x.png 2x">
这是我在浏览器中的输出:
<img
src="/src/assets/logo.png"
srcset="/src/views/@/assets/logo@2x.png 2x"
>
您是否尝试使用 srcset
的 v 绑定。
<img
src="@/assets/logo.png"
:srcset="require('@/assets/logo@2x.png') + ' 2x'"/>
看起来 @vue/compiler-sfc
有一个错误,在 v3.0.0-beta.9
时引入 adding support for absolute URLs in srcset
. This bug bypasses the transformation that would've resolved the asset URLs in srcset
. (Reported in GitHub issue vuejs/vue-next#4819
)
我发现的解决方法是手动创建 srcset
并显式解析资产 URL:
<template>
<img :srcset="srcset" />
</template>
<script setup>
import logo2x from '@/assets/logo@2x.png'
import logo3x from '@/assets/logo@3x.png'
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/logo@2x.png'),
import('@/assets/logo@3x.png')
]).then(([{ default: logo2x }, { default: logo3x }]) => {
srcset.value = `${logo2x} 2x, ${logo3x} 3x`
})
</script>
除非您不是很明确要将图像保存在 ./src/assets/images
文件夹中,否则有一个简单的解决方法,就是将图像移动到 ./public/assets/image
文件夹并像这样引用它:
<img src="/assets/images/img-01.png"
srcset="/assets/images/img-01@2x.png 2x">