1

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

我的 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"
>
4

3 回答 3

4

看起来有@vue/compiler-sfc一个错误，v3.0.0-beta.9在. 此错误绕过了可以解析. （在 GitHub 问题中报告）srcsetsrcsetvuejs/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>
于 2021-05-10T05:56:16.840 回答
0

您是否尝试使用 v-binding for srcset.

<img 
  src="@/assets/logo.png" 
  :srcset="require('@/assets/logo@2x.png') + ' 2x'"/>
于 2021-05-09T07:10:01.623 回答
0

除非您不是非常具体地将图像保存在./src/assets/images文件夹中，否则有一个简单的修复方法，即将您的图像移动到./public/assets/image文件夹并像这样引用它：

<img src="/assets/images/img-01.png"
     srcset="/assets/images/img-01@2x.png 2x">
于 2021-06-14T13:09:00.457 回答