title: How to get path of image in the Laravel 9 with Vue 3 and Typescript
body: <p>everyone,
  I install laravel 9 with vue3, and everything was working fine but then when I try to get the image in my APP.Vue component here is the code for image <code>&lt;img src=&quot;logo.png&quot; alt=&quot;Logo Image&quot; /&gt;</code> it did not load on browser giving an error &quot;image not found&quot; inside the browser console.</p>
  <p>I tried multiple solutionsns but they did not work for me.</p>
  <p>please help</p>
  <p>bellow it the vite.congig.ts file.</p>
  <pre><code>    import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import vue from '@vitejs/plugin-vue'
   
  export default defineConfig({
      plugins: [
          laravel([
              'resources/scss/app.scss',
              'resources/js/app.ts',
          ]),
          vue({
              template: {
                  transformAssetUrls: {
                      // The Vue plugin will re-write asset URLs, when referenced
                      // in Single File Components, to point to the Laravel web
                      // server. Setting this to `null` allows the Laravel plugin
                      // to instead re-write asset URLs to point to the Vite
                      // server instead.
                      base: null,
   
                      // The Vue plugin will parse absolute URLs and treat them
                      // as absolute paths to files on disk. Setting this to
                      // `false` will leave absolute URLs un-touched so they can
                      // reference assets in the public directly as expected.
                      includeAbsolute: false,
                  },
              },
          }),
      ],
  });
  </code></pre>
  <p>My App.vue(where i am accessing the image)</p>
  <pre><code>&lt;template&gt;
    &lt;header&gt;
      &lt;Menubar
        class=&quot;
          layout-topbar
          w-full
          fixed
          h-5
          shadow-1
          bg-white
          border-noround border-none
        &quot;
        :model=&quot;showSidebar ? null : sidebarItems&quot;
      &gt;
        &lt;template #start&gt;
           &lt;img src=&quot;logo.png&quot; alt=&quot;Logo Image&quot; /&gt;
        &lt;/template&gt;
  
        &lt;template #end v-if=&quot;showSidebar&quot;&gt;
          &lt;p&gt;Welcome, Muhammad &lt;/p&gt;
        &lt;/template&gt;
      &lt;/Menubar&gt;
    &lt;/header&gt;
    &lt;main&gt;
      &lt;Menu
        class=&quot;layout-sidebar border-noround border-none border-right-1&quot;
        :model=&quot;sidebarItems&quot;
        v-if=&quot;showSidebar&quot;
      /&gt;
      &lt;div class=&quot;layout-main&quot;&gt;
        &lt;div class=&quot;layout-content&quot;&gt;
          &lt;div class=&quot;px-5 py-7&quot;&gt;
              &lt;router-view /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div
          class=&quot;layout-footer flex align-items-center justify-content-between&quot;
        &gt;
          &lt;small&gt;Copyright© &lt;b&gt;spantiklab.com&lt;/b&gt; Car Rent&lt;/small&gt;
          &lt;small&gt;Version 3.0&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { Options, Vue } from &quot;vue-class-component&quot;;
  
  import { useStore } from &quot;vuex&quot;;
  
  @Options({
    components: {},
  })
  export default class App extends Vue {
    showSidebar: Boolean = true;
  
    mounted() {
      window.onresize = () =&gt; {
        if (window.innerWidth &lt; 960) {
          this.showSidebar = false;
        } else {
          this.showSidebar = true;
        }
      };
    }
  
    sidebarItems = [
      {
        label: &quot;General&quot;,
        items: [
          {
            label: &quot;Dashboard&quot;,
            to: &quot;/admin&quot;,
          },
          {
            label: &quot;Reservations&quot;,
          },
          {
            label: &quot;Types and Rates&quot;,
          },
          {
            label: &quot;Extras&quot;,
          },
          {
            label: &quot;Office Locations&quot;,
          },
          {
            label: &quot;Users&quot;,
          },
  
        ],
      },
      {
        label: &quot;Car Inventory&quot;,
        items: [
          {
            label: &quot;Cars&quot;,
          },
          {
            label: &quot;Availability&quot;,
          },
        ],
      },
      {
        label: &quot;Options&quot;,
        items: [
          {
            label: &quot;Rental Settings&quot;,
          },
          {
            label: &quot;Payments&quot;,
          },
          {
            label: &quot;Checkout Form&quot;,
          },
          {
            label: &quot;Notificatins&quot;,
          },
          {
            label: &quot;Terms&quot;,
          },
        ],
      },
      {
        label: &quot;System Options&quot;,
        items: [
          {
            label: &quot;General&quot;,
          },
          {
            label: &quot;API Keys&quot;,
          },
          {
            label: &quot;Email Settings&quot;,
          },
          {
            label: &quot;SMS Settings&quot;,
          },
          {
            label: &quot;Languages&quot;,
          },
          {
            label: &quot;Login &amp; Protection&quot;,
          },
          {
            label: &quot;Countries&quot;,
          },
          {
            label: &quot;Corn Jobs&quot;,
          },
        ],
      },
      {
        label: &quot;Profile Settings&quot;,
        items: [
          {
            label: &quot;Profile&quot;,
          },
          {
            label: &quot;Log out&quot;,
          },
        ],
      },
    ]
  }
  &lt;/script&gt;
  </code></pre>
  <p>the image is in resources/js/images</p>