i am trying to display an image which is located in storage/app/uploads. I already run the "php artisan storage:link" command and it was a success but its still not showing. When i also inspect the code in the browser the image is there together with the path. 'Upload' is linked to the image path.
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="/storage/{{ $post->image }}">
</div>
#endforeach
Try this solution:
use asset(), its get files from public folder
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="{{ asset('images/' . $post->image) }}">
</div>
#endforeach
you have 2 options either use the direct url or asset method--
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="{{ asset(yourpath) }}">
</div>
#endforeach
OR
#foreach($user->posts as $post)
<div class="col-4">
<img class="w-100" src="{{ url(yourpath) }}">
</div>
#endforeach
your path would be after the storage directory in public directory.
Related
I would like to show pictures on my website.
Here is the code of the view file :
#foreach($posts as $post)
<div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
<img src="{{asset("mvbimg/".$post->image)}}" >
<a href="/news/{{ $post->slug }}">
#if(!empty($post->image))
<img class="hover:grow hover:shadow-lg" src="{{ asset("mvbimg/".$post->image."")}}" alt="{{ $post->title }}">
#else
<img class="hover:grow hover:shadow-lg" src="https://www.example.com/img/nopic.jpg" alt="{{ $post->title }}">
#endif
<p style="text-align: center;">{{ $post->title }}</p></a>
</div>
#endforeach
And this is the frontend :
This is an URL of a picture upload on the server :
http://127.0.0.1:8000/mvbimg/202204171949lbc1.jpg
And this is my directory :
I'm trying to show all images on my storage/app/livros folder on a view with this code below, but I get this . How can I show these images?
#extends('layouts.app_cad_livros')
#section('content')
<div class="textocs">
<br>
<h3>LIVROS</h3>
</div>
<div class="card_livro">
#foreach($livro as $mostra)
{{$mostra->users_id}}
<img src="{{ url("storage/app/livros{$mostra->image}") }}"
style="max-width=100px;">
TÍTULO {{$mostra->namel}}<br>
AUTOR {{$mostra->autor}}<br>
EDITORA {{$mostra->editora}}<br>
CATEGORIA {{$mostra->categoria}}<br>
CLASSIFICAÇÃO {{$mostra->classificação}}<br>
DESCRIÇÃO {{$mostra->descricao}}<br>
CAPA {{$mostra->image}}<br>
#endforeach
</div>
<a href="{{ url('/alugar', $mostra->users_id)}}">
<button class="btn btn-primary">quero alugar</button>
</a>
#endsection
this is the
<img src="{{ url("storage/{$mostra->image}") }}" style="max-width=100px;">
You need to run the command:
php artisan storage:link
and to access the image:
asset('storage/app/path/to/image')
try this
asset('storage/app/livros/'.$mostra->image.')
or
asset('storage/app/livros/{$mostra->image}')
You can get more info From Here
I have been trying to figure out how to filter my foreach loop and only display an image if my post has one. So far I have been trying different functions and #ifs but to no avail.
Here is my controller code:
<div class="container">
<div class="row">
<div class="col-sm-6">
#foreach($posts as $post)
<div>
<h1>{{$post->title}}</h1>
<p>{{$post->body}}</p>
<img src="{{url('img', $post->image)}}">
</div>
<hr>
#endforeach
</div>
</div>
</div>
You can use a simple #if:
#if ($post->image)
<img src="{{ url('img/' . $post->image) }}">
#endif
Or #isset:
#isset ($post->image)
<img src="{{ url('img/' . $post->image) }}">
#endisset
https://laravel.com/docs/5.5/blade#control-structures
You can use a simple #if statement to see if the image property of the current $post is set. This could look a little something like this:
#foreach($posts as $post)
<div>
<h1>{{$post->title}}</h1>
<p>{{$post->body}}</p>
#if(!empty($post->image))
<img src="{{url('img', $post->image)}}">
#endif
</div>
<hr>
#endforeach
By including this, the <img> element will only be displayed if the property is not empty.
As also mentioned in another answer, you can replace the #if(!empty(...)) by #isset(...) to achieve the same result.
So I'm building my first blog, and I'd like to dynamically show to posts on my landing page. I want the layout to become like this (might be a little weird):
post-image - post-preview
post-preview - post-image
post-image - post-preview
This is what I have right now to show to blog posts:
#foreach($posts as $post)
<div class="col-sm-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
<span>{{ $post->title }}</span>
</a>
</div>
#endforeach
web.php (route):
$posts = App\Post::take(3)->orderBy('created_at')->get();
return view('welcome', compact('posts'));
Now as I'd like to make the layout dynamically. I think I can do this by checking if the ID even or odd. However I have no idea on how to do this even when I've searched 50% of the web already :) .
If there is a better way on doing this just let me know! Greatly appreciated guys!
Yes you can do it by checking if current post or loop iteration is odd or even. (https://laravel.com/docs/5.5/blade#the-loop-variable) For Odd loop iteration, you can write image code first and in even loop iteration you can write preview code first to achieve your desired layout. You can check the following code:
#foreach($posts as $post)
<div class="row">
#if( $loop->iteration % 2 == 0 )
<div class="col-md-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
</a>
</div>
<div class="col-md-8">
<span>{{ $post->title }}</span>
</div>
#else
<div class="col-md-8">
<span>{{ $post->title }}</span>
</div>
<div class="col-md-4">
<a href="/post/{{ $post->slug }}">
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
</a>
</div>
#endif
</div>
#endforeach
Ok I guess I got your question. so there is no direct solution but you can measure inside your for loop by adding extra variable such as:
<?php $inc = 0;?>
#foreach($posts as $post)
<div class="col-sm-4">
<a href="/post/{{ $post->slug }}">
#if($inc%2 == 0)
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
<span>{{ $post->title }}</span>
#else
<span>{{ $post->title }}</span>
<img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
#endif
<?php $inc++;?>
</a>
</div>
#endforeach
Or you can use for loop instead of foreach of loop and inside for loop you can check variable i.e. i is odd or even.
I am trying to add and display a image from mysql database stored in BLOB type in my web App, but while using {{ Auth::user()->profile_pic }} getting errors, can someone tell me what mistake i am doing and how to do this using laravel 5.
dashboard.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Profile</div>
<div class="panel-body">
<img src="{{ Auth::user()->profile_pic }}" class="img-circle" width="200" height="200">
<h3>{{ Auth::user()->name }}</h3>
<h5>{{ Auth::user()->email }}</h5>
<hr>
<h6>{{ Auth::user()->created_at }}</h6>
</div>
</div>
</div>
<div class="col-md-9">
</div>
</div>
</div>
#endsection
The html <img src="{{ Auth::user()->profile_pic }}" class="img-circle" width="200" height="200"> needs address url instead of {{ Auth::user()->profile_pic }}
Add code in route first get the address using response object
Route::get('/' function($user) {
$Image = Auth::user()->profile_pic;
return response($Image)->header('Content-Type', 'image/jpeg');
}
then now pass address of response to the html element
Route::get('/dashboard', function() {
$id = Auth::user()->id;
$Image_url = "user/$id/profile-pic";
return view('/dashboard', ['Image_url' => $Image_url]);
}
Passing address in blade
<img src="{{ $Image_url }}" class="img-circle" width="200" height="200">