Replies: 2 comments
-
Here is what I was writing before reading this, that propose a little bit different syntax, after I posted this question without any answers yet. This plugin helps a little writing references to assets, but it have certain limitations, as only working on specific parts of the template, so there are multiple cases that are not possible to handle with ease: <script setup>
import vue from './assets/vue.svg' // verbose but works
const vueImg = './assets/vue.svg' // fails
const vueObject = {
img: './assets/vue.svg', // fails
name: 'vue',
}
const name = 'vue'
</script>
<template>
<div>
<img src="./assets/vue.svg" /> <!-- works -->
<img :src="`./assets/${ name }.svg`" /> <!-- fails -->
<custom-img src="./assets/vue.svg" /> <!-- fails -->
</div>
</template> Dynamic assets are also a problem here, that have been I think that I would propose as adding a globally available function to handle those, for <script setup>
const vueObject = {
img: vue_image_foo,
name: 'vue',
}
const name = 'vue'
</script>
<template>
<div>
<img :src="vueObject.img" />
<img :src="asset("*.svg", `${name}.svg`)
<custom-img :src="asset('vue.svg')" />
</div>
</template> This could be re-written as: <script setup>
import vue_image_foo from './assets/vue.svg'
const assets_foo = import.meta.glob("*.svg")
const vueObject = {
img: vue_image_foo,
name: 'vue',
}
const name = 'vue'
</script>
<template>
<div>
<img :src="vueObject.img" />
<img :src="assets_foo[`./assets/${name}.svg`].default"
<custom-img :src="vue_image_foo" />
</div>
</template> The advantages of that syntax, is that it does not require reading the context, |
Beta Was this translation helpful? Give feedback.
-
For future readers: |
Beta Was this translation helpful? Give feedback.
-
In my Vue-Projects i often pass asset sources to custom components via props. For example this simple image viewer in a webpack / vue project:
It seems that now with vite i would have to import the asset in my script and expose it as a variable that i send to the component prop.
this seems very tedious compared to the webpack code. I understand, that vite is a dev server, not a bundler, but as far as i understand it can transform urls from img-tags src-attributes for example.
My proposal would be to provide a syntax with which we can mark a attribute value as static asset thats URL should be transformed.
For example like, where transformURL would tell Vite that this is a static asset. :
Maybe i can already achieve a similar (but not so dynamic) behaviour by using the transformAssetUrls option?
I am not sure how exactly the syntax of this feature should look and i do not know if this is a "vite" feature or a "@vue/compiler-sfc"
Beta Was this translation helpful? Give feedback.
All reactions