#### 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="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?

Source: Laravel