Nuxt•2w ago

What is the alternative to passing asset urls as props?

Nuxt does not transform ~/assets/icon.svg if it is used as a prop to a component. What are the workarounds?

2 Replies

Hi @NightFuries. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there are a few workarounds for the issue of Nuxt not transforming asset URLs passed as props to components. Here are the main alternatives: 1. Import the image and bind it to the prop: Stack Overflow Post suggests importing the image and binding it to the prop like this:

<script setup>
 import img from '~/assets/image.png'
</script>
<template>
  <ProductPanel :logo-url="img">
    <template #product-name>Flux capacitor</template>
  </ProductPanel>
</template>

<script setup>
 import img from '~/assets/image.png'
</script>
<template>
  <ProductPanel :logo-url="img">
    <template #product-name>Flux capacitor</template>
  </ProductPanel>
</template>

2. Place the image in the public folder: The same Stack Overflow post mentions that you can place the image inside the public folder and use its path directly. This is because files in the public directory are served at the server root as-is. 3. Use relative paths: According to the Nuxt documentation on layers, when importing using aliases (such as ~/ and @/) in layer components and composables, you can use relative paths as a workaround. 4. Move images to the public folder (temporary solution): As mentioned in a Stack Overflow answer, moving images to the public folder is a temporary solution that some developers are using. It's worth noting that this issue seems to be a difference between Nuxt 2 and Nuxt 3. The Nuxt team is aware of this problem, and there might be improvements or official solutions in future updates. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@711113525023735809> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

What is the alternative to passing asset urls as props?

Did you find this page helpful?