Any ideas on how can I show the image from storage. I can't get the format right. I notice that using post.media in image source makes the whole record dispear in inspection. But once i remove it or place a random image url from the internet, post.media echos the imagine file name on h3
<div v-for="post in posts" v-bind:key="post.id" class="py-3">
<div class="card">
<img src="{{ Storage::url('public/uploads/{{ post.media }})' }}" class="card-img-top">
<div class="card-body">
<h3>{{ post.media }}</h3>
<p>{{ post.description }}</p>
</div>
</div>
</div>
So you are using vue, I dont think it will recognize Storage::url(). First, create a symbolic link from storage to public. php artisan storage:link
Second, create a computed property link.
computed: {
link(){
return '/uploads/' + this.post.media;
}
}
And simply,
<img src="post.link">
Related
I am using UIKIT Lightbox to display post images like Facebook as below:
Controller
$postImages = postsImages::where('postId', $post->postId)->limit(3)->get();
Blade
<div class="uk-child-width-1-3#m" uk-grid uk-lightbox="animation: slide">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href="{{$postImage->imageLink}}">
<img src="{{$postImage->imageLink}}">
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</a>
</div>
#endforeach
</div>
I limited the image thumbnails to 3 and the rest will be shown as +number_of_remaining_photos same like Facebook.
The problem is that when I click on a thumbnail to make it large and view the rest then I can see only those three images which I limited.
I went through UIKIT lighbox documentation and I found items option but I don't know how to use it in order to view all the images of that post by creating another query like below:
$postImages = postsImages::where('postId', $post->postId)->get();
to get all images there and showing it in the lightbox.
P.S. I am not sure, that is item option for that purpose or not. )
This is a practical solution.
1- Make another query without limit.
$postImagesAll = postsImages::where('postId', $post->postId)->get();
2- Add data-uk-lightbox="{group:'my-group'}" attribute to the result of both queries like below and everything will work fine:
<div class="uk-grid-collapse" uk-grid uk-lightbox="animation: slide;">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href='/storage/posts/{{$postImage->imageLink}}' data-uk-lightbox="{group:'my-group'}">
<img src="{{$postImage->imageLink}}"/>
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</div>
</a>
</div>
#endforeach
#foreach ($postImagesAll as $postImage)
<a class="uk-hidden" href="{{$postImage->imageLink}}" data-uk-lightbox="{group:'my-group'}"></a>
#endforeach
</div>
I'm using Laravel 5.7 and I wish to upload images and place the path into database, it's easy and I did it, all is cool. now trying to retrieve the image, the path is correct and I tried to change the settings of the folders and the storage, I tried to find every single solution out there for 7 hours and still i can't find the issue, please advise.
I tried to change the storage from local to public and tried to use different methods to recall the image but all failed.
<div class="card">
<img class="card-img-top" src="{{ asset('storage/'.$post->background_image) }}">
<img class="card-img-top" src="/storage//{{$post['first_image']}}" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">{{$post['post_name']}}</h4>
<p class="card-text">{{$post['description']}}</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
//as for saving the file i tried the below options:
$path1 = $request->file('background_image')->store('background_image');
if ($validatedImages) {
$fileNamewithExt= $request->file('background_image')
->getClientOriginalName();
$filename= pathinfo($fileNamewithExt, PATHINFO_FILENAME);
$extension = $request ->file('background_image')->getClientOriginalExtension();
$fileNameToStore = $filename.'_'.time().'.'.$extension;
$path1 = $request->file('background_image')
->storeAs('/background_image',$fileNameToStore);
}
I expect the image to load instead of appearing unavailable, the path loads from the database, but for some reason the image doesn't load.
I'm getting stuck in an ecommerce development project using Laravel and Vue. I can't make the images appear dynamically in the index view of the product. I'm able to upload and print the images in the show view and these are stored in storage / app / images.
The problem is that the image_url attribute of a product is nullable so it may or may not have an image and the idea is to show them when they have one.
Here is the code of the component ProductCardComponete.vue that is where I develop the code itself.
<template lang="html">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card">
<header class="bg-dark padding">
</header>
<div class="justify-content-center">
<!-- <img v-for="product in products" v- if="product.extension" :src="'/productos/images/'+product.id+product.extension">
-->
<img :src="'/productos/images/34.jpeg'" class="card-img-top">
</div>
<div class="card-body padding">
<h2 class="card-title">
<a :href="'/productos/'+product.id">
{{product.title}}
</a>
</h2>
<h4 class="card-subtitle">{{product.humanPrice}}</h4>
<p class="card-text">{{product.description}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
product: {
type: Object
}
}
}
</script>
Of course, when I put the route in a static way, it works. But I don't know how I could arrive at the solution to show it dynamically and the way of showing the image if the product has one.
Finally here is a link to the github Repo of the project just in case.
Github Repo
Images should be saved in storage/app/public/ and you should make a symlink so that you can access storage folder in public folder. Otherwise you will stuck in accessing images. Read this official doc.
Good afternoon,
I am working on the blog where I have detail of the article and want to show few pictures.
What I am getting at the moment:
As you can see I am getting the content and after the content pictures. Here is also the code of the blade.
<div class="container">
#foreach($articles as $article)
<article>
<h1 class="title is-1">{{$article->title}}</h1>
#foreach($article->images as $image)
<figure class="image is-128x128">
<img src="{{$image->path}}" alt="{{$image->title}}">
</figure>
#endforeach
<p>{{$article->content}}</p>
</article>
#endforeach
</div>
Because I am getting a object I cannot split the pictures.
.
It was rather hard to figure out what you want, but I'm quite sure I finally got the question.
What you wanna do is something like this:
<div class="container">
#foreach($articles as $article)
<article>
<h1 class="title is-1">{{$article->title}}</h1>
#if(count($article->images) > 0)
<figure class="image is-128x128">
<img src="{{$article->images->first()->path}}" alt="{{$article->images->first()->title}}">
</figure>
#endif
<p>{{$article->content}}</p>
#if(count($article->images) > 1)
#foreach($article->images->slice(1) as $image)
<figure class="image is-128x128">
<img src="{{$image->path}}" alt="{{$image->title}}">
</figure>
#endforeach
#endif
</article>
#endforeach
</div>
This will not only give you headline > image 1 > content > remaining images, it will also make sure you only print images when there are actually some available. The $article->images->slice(1) within the second #if() will ensure we are not using the first image a second time.
Make sure $image->path is the correct to the image file (if it's an url, skip this point).
You can check by echoing it or just dd($image->path).
For the image to be accessed, it needs to be on the public folder of laravel
If you wish to have the files in the storage folder and have it accessed publicly, you'll need to create a symlink
https://laravel.com/docs/5.6/filesystem
I've try many ways to show Image that stored on my FileSystem but not work. last i try with Intervention Image package, but it still not showing, just show icon blank image not the image itself.
This is my View:
<header>
<div style="text-align: center">
<h4>Detail Keluhan</h4><hr>
<h5 style="color: gray">{{$keluhan->username}}</h5>
<img src="{{ route('product.image', ['ttd_setuju' => $keluhan->ttd_setuju]) }}" alt="ttd_setuju"/>
</div>
</header>
This is my Route:
Route::get('image/{ttd_setuju}', ['as'=>'product.image', function($ttd_setuju) {
return Image::make('app/public/img/ttd'.'/'.$ttd_setuju)->response('png');
}]);
for information, i stored it on app/public/img/ttd
and it's name on table 'keluhan' in my DB
how can i solve this guys ? please kindly help any other way its okay if its work
So finally i fix the problem with this one
<img src="{{ asset('img/ttd/'.$keluhan->gambar) }}" height="200" width="250"/>
Using asset.