Laravel and Vue: How do I get images from my public folder in a Vue component?

  laravel, vue.js

I am trying to get a logo image from my public folder in my laravel and Vue application. The file is called index.vue and have the following structure:

<template>
    <div>
        <div class="header-container">
            <div class="header-content">
                <div class="logo-container">
                    <img :src="'/public/images/logo/black.png'" alt="logo">
                </div>
            </div>
        </div>

        <!-- Tell Vue where to render components -->
        <router-view></router-view>
    </div>
</template>

Here is the file structure and you can see that file exists and the path is correct:

enter image description here

But when I switch back to the view it looks like this:

enter image description here

I have also tried to call it the way I would in a blade template using {{ asset() }}, but this doesn’t work and gives me a compiler error.

How do I get this image to load in my Vue file?

Source: Laravel

Leave a Reply