Vite Vue-3 - project @ not working for srcset

Question

I followed this solution to make alias @ work:

My 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') }
    ],
  },
})

This works:

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

This doesn't work:

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

Here is how my output in browser looks like:

<img
  src="/src/assets/logo.png"
  srcset="/src/views/@/assets/logo@2x.png 2x"
>

tony19 · Accepted Answer · 2021-10-20T00:14:39.217

It looks like @vue/compiler-sfc has a bug, introduced in v3.0.0-beta.9 when 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)

A workaround I found was to manually create a srcset with the asset URLs explicitly resolved:

<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>

Or using dynamic imports, which may be helpful if you need to update srcset dynamically:

<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>

is this issue know or reported to vite team? will there any easy fix soon? — Syed, Jun 14 '21 at 12:45
@Syed I reported the bug in https://github.com/vuejs/vue-next/issues/4819 — tony19, Oct 20 '21 at 00:15

score 0 · Answer 2 · answered May 09 '21 at 07:10

0

Did you try using the v-binding for srcset.

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

answered May 09 '21 at 07:10

Tony Tin Nguyen

170
1
7

Thanks for your help, but that did not help. I am getting this error: `Uncaught (in promise) ReferenceError: require is not defined` and more over I was looking for solution without using `require()`. – Syed May 09 '21 at 10:40

score 0 · Answer 3 · answered Jun 14 '21 at 13:09

Unless you are not very specific to keep images in ./src/assets/images folder, there is a simple fix and that would be to move your images to ./public/assets/image folder and refer it like:

<img src="/assets/images/img-01.png"
     srcset="/assets/images/img-01@2x.png 2x">

Vite Vue-3 - project @ not working for srcset

3 Answers3