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.
Related
i did the loop to display images in blade, in my case it display empty image if image does not exist, then i want when the image does not exist it will display image whose name is not-found.jpg and whose root is img/not-found.jpg, if not it will display normal image.
<img src="{{ asset('storage/'.$annonce->image) }}" class="img-responsive" style="width: 240px;height: 240px" />
try this:
<img src="{{ !empty($annonce->image) ? asset('storage/'.$annonce->image) : asset('/img/not-found.jpg') }}" class="img-responsive" style="width: 240px;height: 240px" />
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">
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 store image in public folder now i want to display the image i give the path but image not show any one help me whats the wrong in my code
My image complete path is public/admin/product
<img src="public/admin/product/<?php echo $productr['image']; ?>" height="30px" width="30px">
First thing, you should not store those images inside public directory. Instead you should use Storage directory. Please have a look to the Laravel documentation:
https://laravel.com/docs/5.3/structure#the-storage-directory
So, upload such images inside "storage/app/public"
Then fire below artisan command to create symbolic link:
php artisan storage:link
And then create a link to that image:
<img src="{{ echo asset('storage/file.png') }}" height="30px" width="30px">
Laravel view files blade.php supports {{}} tags to display values.
{{ $valueToBeDisplayed }}
In your case, you can do like
<img src="/admin/product/{{ $product['image'] }}" height="30px" width="30px" />
Assuming image name is abc.png.
Make sure you have that image in folder public/admin/product/abc.png
remove public from your path.., also, you might have typos on the variable $productr, (did you mean $product?) try
<img src="admin/product/<?php echo $product['image']; ?>" height="30px" width="30px">
or, using blade standard:
<img src="admin/product/{{ $product['image']; }}" height="30px" width="30px">
#if ($productr['image'])
<img src="{{ asset('images/profile/'.$productr['image']) }}" alt="{{ $category->user->image }}">
#else
<img src="{{ asset('assets/dist/img/default-150x150.png') }}" >
#endif
<img src="{{storage/app/images/.($employee -> image)}}" width="50px">
"storage/app/images/" is the folder path to where your images are stored.
hope this will help
{{ asset('public/imagepath/image_name') }}
I'm working on a school project where I can post images online using meteor.
I was able to post image and display the datas, but it's keep stacking to the other images. Is there any wasy to fix this? Here's the picture:
And here's my code that displays the datas:
<template name="posts">
{{#if currentUser}}
<div class="grid">
<div class="grid-sizer"></div>
{{#each postList}}
<div class="grid-item">
{{updateMasonry}}
<img src="{{this.url}}">
{{#each postData}}
{{this.username}}
<br>
{{this.message}}
<br>
{{this.createdAt}}
{{/each}}
</div>
{{/each}}
</div>
{{/if}}
I think you'd want to bust it up into another template. You'd have your larger posts templates that would hold the images+comments and then you'd make a new template for each images.
So having a separate template for each of your image posts
<template name="images">
<div>
<img src="{{url}}"/>
{{#each postData}}
{username}}
<br/>
{{message}}
<br/>
{{createdAt}}
{{/each}}
</div>
</template>
You can pass data into your template and you can only pull postData that is already meant for that image, instead of having everything jumbled into 1 template.
It's probably best practice to split up your templates in the above fashion and properly pass data to each image post instead of grouping everything into 1 template.
https://www.discovermeteor.com/blog/a-guide-to-meteor-templates-data-contexts/