[Vuejs]-How to include images in Vue Components in vite and laravel 10

-1👍

One issue that I see is that you are trying to bundle your image asset with an "absolute path": you start the path with a back slash, src="/assets/img/logo.png". As such, it will not be included in the build. You will either want to include the resource yourself in the public file or a file off of public or use a relative path to the resource (not starting the path with a backslash).

Reference: Laravel 10 Documentation #URL Processing

Which states:

URL Processing

When using Vite and referencing assets in your application’s HTML, CSS, or JS, there are a couple of caveats to consider. First, if you reference assets with an absolute path, Vite will not include the asset in the build; therefore, you should ensure that the asset is available in your public directory.

When referencing relative asset paths, you should remember that the paths are relative to the file where they are referenced. Any assets referenced via a relative path will be re-written, versioned, and bundled by Vite.

Consider the following project structure:

public/
  taylor.png
resources/
  js/
    Pages/
      Welcome.vue
  images/
    abigail.png

The following example demonstrates how Vite will treat relative and absolute URLs:

<!-- This asset is not handled by Vite and will not be included in the build -->
<img src="/taylor.png">
 
<!-- This asset will be re-written, versioned, and bundled by Vite  -->
<img src="../../images/abigail.png">

Leave a comment