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

I am trying to get a logo image from my public folder in my laravel … Read more Laravel and Vue: How do I get images from my public folder in a Vue component?

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: Vue – Stack Overflow


Categories: NewsTags: ,

Tags: ,


Leave a Reply

Your email address will not be published. Required fields are marked *