CODEWITHSUNDEEP
laravelvue.js
RC07JNR
RC07JNR

Reputation: 595

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?

Upvotes: 2

Views: 4170

Answers (1)

rushjs
rushjs

Reputation: 114

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">

Upvotes: 2

Related Questions