[Vuejs]-How to control images in Vue3 named slots

by

1👍

✅

You would need to place the w-[80%] class on the <img> you pass into the slot. The <img> element in the <slot name="logo"> is a placeholder when no <template #logo> is passed and has no effect on the <img> you pass into the slot since the content of the slot is completely replaced. Any class names you apply to the placeholder <img> makes no difference to the passed <img> element.

If you would always like an image in the logo slot, you could instead use a prop for the <img>, thus allowing you to enforce the class attribute value:

<template>
  <div …>
    <div … >
      <img :src="logo" alt="" class="w-[80%]" />
    </div>
    …
  </div>
</template>

<script setup>
const props = defineProps(['logo']);
</script>

<!-- or -->

<script>
export default {
  props: ['logo'],
}
</script>

<!-- etc. -->

And then in to use it:

<Card logo="assets\images\hero-section\node.png">
  …
</Card>
👤Wongjn

Leave a comment