title: How to pass images has props in a vue js component (Configured with vite cause require doesnt work in vite)
body: <p>Here is my parent component</p>
  <pre><code>&lt;template&gt;
  &lt;rooms-card 
  roomImage=&quot;../../assets/images/room3.jpg&quot; 
  roomType=&quot;Duplex Room&quot; 
  roomDescription=&quot;Sami double bed 1 guest room 3 windows&quot; 
  roomPrice=&quot;$50/night&quot;
  /&gt;
  &lt;/template&gt;
  
  </code></pre>
  <p>Here is the child component</p>
  <pre><code>&lt;template&gt;
          &lt;div class=&quot;m-5 px-6 py-4 shadow-xl border mb-14&quot;&gt;
          &lt;div class=&quot;w-64 h-72 bg-red-700&quot;&gt;
              &lt;img :src=&quot;roomImage&quot; class=&quot;h-full&quot;/&gt;
          &lt;/div&gt;
          &lt;div class=&quot;&quot;&gt;
              &lt;h1 class=&quot;font-semibold text-xl my-3&quot;&gt;{{roomType}}&lt;/h1&gt;
              &lt;p class=&quot;text-sm my-2 text-slate-500  w-44&quot;&gt;{{roomDescription}}&lt;/p&gt;
              &lt;p&gt;Starting from&lt;span class=&quot;font-semibold text-xl&quot;&gt;{{roomPrice}}&lt;/span&gt;&lt;/p&gt;
              &lt;button class=&quot;bg-pink-500 my-5 px-6 py-3 text-white&quot;&gt;
                  Book now
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  // import { any } from &quot;prop-types&quot;;
  
  const props = defineProps({
    roomImage:String,
    roomType: String,
    roomDescription:String,
    roomPrice:String
  })
  
  
  
  console.log(props.roomImage)
  &lt;/script&gt;
  </code></pre>
  <p>NOTE: even if i use require(@/asset/images......) in my image tag src it wont work because for some reasons vite isn't configure to use requires</p>