am trying to display my images dynamically from laravel storage folder but it says images not found even though i can see the pictures adding up in the folder, i also tried php artisan link but nothing good
<v-btn flat v-on="on">
<div>
{{connectedUser.name }} {{ connectedUser.last_name }}
<v-avatar size="38px"">
<img :src="'http://api.sirh.test/storage/'+connectedUser.img" />
</v-avatar>
</div>
</v-btn>
Try this.
:src=‘getImage(connectedUser)’
getImage(connectedUser){
return /storage/ + connectedUser.img
}
Related
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?
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">
i am beginner of Laravel 8. i creating simple project. but when i view the project images are not shown.
View Page
Index.php
<div>
<img src="{{asset('/images/chocolate-ice.jpg')}}" id="Chocolate" class="photo" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Chocolate</b>
</div>
Folder structure
If you want to use Blade your template/view must end in .blade.php. That is how the view system knows what view engine to use. When it is just .php it does not use the Blade compiler to parse the template.
I've downloaded a template from here.
I want to design pages like that in laravel blade pages, I put css and js files in public folder and link blade files to them, and it works.
But I can't handle images, there isn't a folder for images in this template and I don't know how to load them in my blade pages.
you can upload images on below path
storage/app/public/images
//this way you can use in your blade file
<img src = "{{ asset('/images/YOUR_IMAGE.png') }}" />
but you need to run one command
php artisan storage:link
it will create a symlink from public/storage to storage/app/public
please insert as below path and make link like that.
try this.
<div class="hidden-xs" style="width:200px; height:auto; margin-left:-10px;">
<img src="{{ asset('uploads/logos/myLogo.png') }}">
</div>
If not working... then check your App Url in /.env and restart your app server.
APP_URL=http://localhost
Happy coding~!:)
I am trying to display an image like what is done in this tutorial https://bootstrap-vue.js.org/docs/components/image/
Here is my code
<template>
<b-container fluid class="p-4 bg-dark">
<b-row>
<b-col>
<b-img rounded="circle" thumbnail fluid src="require('../assets/sweetcart.jpg')" alt="Thumbnail" />
</b-col>
<b-col>
<b-img rounded="circle" thumbnail fluid src="https://picsum.photos/250/250/?image=58" alt="Thumbnail" />
</b-col>
<b-col>
<b-img rounded="circle" thumbnail fluid src="https://picsum.photos/250/250/?image=59" alt="Thumbnail" />
</b-col>
</b-row>
</b-container>
</template>
Here is my file structure, although im sure the file path for the image is correct as I have been able to display the image in its own div tag, issue seems to be something to do with bootstrap?
I am working within the Home.vue file.
Thanks for any help!
I managed to fix this by placing the image in the static folder instead of the assets folder.
I am still curious as to why this wouldn't work in the assets folder?
These guys are discussing something similar but there seemed to be no definitive answer.
https://github.com/vuejs/Discussion/issues/202
I m facing strange issue in laravel.
on my local serve it is not accessing this image
http://localhost:8000/img/logo.png
but I can acess this image
http://localhost:8000/img/profile.png
mover over it is not show in code as well any ideas.
Try
<img src="{{ url('img/yourimage.png') }}" alt="">
It will grab the image from your project public folder. It will look like yourwebsite.com/img/yourimage.png and in local server it will look like
http://localhost:8000/img/yourimage.png
2nd Solution:
Try
{{ Html::image('yourimage.png') }}
in laravel there is a inbuilt function url() which is used to ge the path from the public folder of your project. So to show image in your view you can use:
<img src="{{ url('img/yourimage.png') }}" alt="No image found">