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:

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

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?

CodePudding user response：

Not sure about vue laravel. But, since its a relative path I dont think you need to bind anything.

    <img src="/images/logo/black.png" alt="logo">