如何使用 Vue 3 和 Typescript 在 Laravel 9 中获取图像路径

Question

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 <img src="logo.png" alt="Logo Image" /> it did not load on browser giving an error "image not found" inside the browser console.

I tried multiple solutionsns but they did not work for me.

please help

bellow it the vite.congig.ts file.

    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,
                },
            },
        }),
    ],
});

My App.vue(where i am accessing the image)

<template>
  <header>
    <Menubar
      class="
        layout-topbar
        w-full
        fixed
        h-5
        shadow-1
        bg-white
        border-noround border-none
      "
      :model="showSidebar ? null : sidebarItems"
    >
      <template #start>
         <img src="logo.png" alt="Logo Image" />
      </template>

      <template #end v-if="showSidebar">
        <p>Welcome, Muhammad </p>
      </template>
    </Menubar>
  </header>
  <main>
    <Menu
      class="layout-sidebar border-noround border-none border-right-1"
      :model="sidebarItems"
      v-if="showSidebar"
    />
    <div class="layout-main">
      <div class="layout-content">
        <div class="px-5 py-7">
            <router-view />
        </div>
      </div>
      <div
        class="layout-footer flex align-items-center justify-content-between"
      >
        <small>Copyright© <b>spantiklab.com</b> Car Rent</small>
        <small>Version 3.0</small>
      </div>
    </div>
  </main>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

import { useStore } from "vuex";

@Options({
  components: {},
})
export default class App extends Vue {
  showSidebar: Boolean = true;

  mounted() {
    window.onresize = () => {
      if (window.innerWidth < 960) {
        this.showSidebar = false;
      } else {
        this.showSidebar = true;
      }
    };
  }

  sidebarItems = [
    {
      label: "General",
      items: [
        {
          label: "Dashboard",
          to: "/admin",
        },
        {
          label: "Reservations",
        },
        {
          label: "Types and Rates",
        },
        {
          label: "Extras",
        },
        {
          label: "Office Locations",
        },
        {
          label: "Users",
        },

      ],
    },
    {
      label: "Car Inventory",
      items: [
        {
          label: "Cars",
        },
        {
          label: "Availability",
        },
      ],
    },
    {
      label: "Options",
      items: [
        {
          label: "Rental Settings",
        },
        {
          label: "Payments",
        },
        {
          label: "Checkout Form",
        },
        {
          label: "Notificatins",
        },
        {
          label: "Terms",
        },
      ],
    },
    {
      label: "System Options",
      items: [
        {
          label: "General",
        },
        {
          label: "API Keys",
        },
        {
          label: "Email Settings",
        },
        {
          label: "SMS Settings",
        },
        {
          label: "Languages",
        },
        {
          label: "Login & Protection",
        },
        {
          label: "Countries",
        },
        {
          label: "Corn Jobs",
        },
      ],
    },
    {
      label: "Profile Settings",
      items: [
        {
          label: "Profile",
        },
        {
          label: "Log out",
        },
      ],
    },
  ]
}
</script>

the image is in resources/js/images

Answer 1

check your img url in brower. img url relative path is the public or static file. please use import or move img to public/static file!