Nuxt•2mo ago

Hashmode, dynamic asset url

Hey there! I'm using a component from a layer which use a public image, which src is based on some conditions. On my component, it looks like somethings like this:

<template>
   <img :src="something" />
</template>
<script setup lang="ts">
const something = useSomeMagic();
</script>

<template>
   <img :src="something" />
</template>
<script setup lang="ts">
const something = useSomeMagic();
</script>

utils/useSomeMagic.ts
export default () => {
    const theme = useTheme();
    return `/img.${theme.current.value.isDark ? 'dark': 'ligh'}.svg`
}

utils/useSomeMagic.ts
export default () => {
    const theme = useTheme();
    return `/img.${theme.current.value.isDark ? 'dark': 'ligh'}.svg`
}

Once I run npx nuxi generate, everything seems fine and app is running, BUT, where my custom component is loaded, image urls are not converted into ./$src. I guess as image source are defined at runtime, url cannot be converted at buildTime. Is there a way for me to detect that hashMode has been enable, then provide the expected source (ie, ./$src)?

1 Reply

kogratte•2mo ago

OK. Solved. Never serve assets with url('/asset. Png'), use instead ${runtimeCfg.app.baseUrl}asset.png.

Gaming

Programming

Hashmode, dynamic asset url