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
Related
I'm trying to view/change profile image of a user but I can't seem to do it right thus nothing is being displayed as I just started to create a page using Laravel. I can see other tutorials have profile image in their profile page but when it comes to me this is the only thing being displayed [what it looks like](https://i.stack.imgur.com/00nyo.png) even though I haven't done anything of the code in the profile.
I tried changing the **APP_URL=http://127.0.0.1:8000** and ***php artisan storage:link*** and removing the comment of the features in **jetstream** and nothing seems to work
Below is the code of the profile photo, what should I do or fix? I'm not really good yet in using Laravel framework
<x-slot name="form">
<!-- Profile Photo -->
#if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
<div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4">
<!-- Profile Photo File Input -->
<input type="file"
wire:model="photo"
x-ref="photo"
x-on:change="
photoName = $refs.photo.files[0].name;
const reader = new FileReader();
reader.onload = (e) => {
photoPreview = e.target.result;
};
reader.readAsDataURL($refs.photo.files[0]);
" />
<x-jet-label for="photo" value="{{ __('Photo') }}" />
<!-- Current Profile Photo -->
<div class="mt-2" x-show="! photoPreview">
<img src="{{ $this->user->profile_photo_url }}" alt="{{ $this->user->name }}" class="rounded-full h-20 w-20 object-cover">
</div>
<!-- New Profile Photo Preview -->
<div class="mt-2" x-show="photoPreview" style="display: none;">
<span class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
x-bind:style="'background-image: url(\'' + photoPreview + '\');'">
</span>
</div>
<x-jet-secondary-button class="mt-2 mr-2" type="button" x-on:click.prevent="$refs.photo.click()">
{{ __('Select A New Photo') }}
</x-jet-secondary-button>
#if ($this->user->profile_photo_path)
<x-jet-secondary-button type="button" class="mt-2" wire:click="deleteProfilePhoto">
{{ __('Remove Photo') }}
</x-jet-secondary-button>
#endif
<x-jet-input-error for="photo" class="mt-2" />
</div>
#endif
You probably haven't activated the profilePhotos section in the configuration of jetstream.
Go to config/jetstream.php and find the features section. You will probably see that the Features::profilePhotos() is commented.
I am trying to display the single image in the slider, but whenever the user will click on this then it's open a popup in data-src="multiple-images-here" where I am running the slider. But the main issue is with the single image display in for loop. It displays all the available images in the loop. Please suggest me the best solution for this.
Here is my index.blade.php file where I am trying to display the slider using this code.
<div class="container-fluid margin-gallery d-lg-block d-block position-relative">
<div class="row">
<div class="col-lg-12 p-0">
<div class="demo-gallery">
#php
if($propertys->propertyImage!=null){
$images = json_decode($propertys->propertyImage->image_path, true);
}
else{
$images=null;
}
#endphp
<?php
$images_prop = collect($images['property_images']);
?>
<ul id="lightgallery">
#if($images['property_images']!=null)
#forelse($images_prop as $img)
<li class="sizing-li position-relative" data-src="{{ asset($img) }}">
<a href="javascript:void()">
<img class="img-responsive" src="{{ asset($img) }}" style="width:929px; height:495px;">
</a>
</li>
#empty
#endforelse
#endif
</ul>
</div>
</div>
</div>
</div>
I want to display the first image from for loop here
<img class="img-responsive" src="{{ asset($img) }}" style="width:929px; height:495px;">
You can pass ->first() function to get only 1 images, It will show you only the first item from your data in database.
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.
I am working on laravel application and trying to find where from these following variables are coming so that I would customize them; As I have searched and found that these variables are coming from vueJs component file, and could not find this vueJs file as I have searched whole application's file and I have zero knowledge in vueJs. Is vueJs file is also embedded in head or before body tag as we put css and js files? please help me.
<div class="row align-items-center" v-cloak>
<div :class="item.pulse"></div>
<div class="col ml--2">
<small> #{{ item.last_status }}</small><br />
<small> #{{ item.time }}</small>
<h4 class="mb-0">
#{{ item.id }} #{{ item.restaurant_name }}
</h4>
<small>#{{ item.client }}</small><br />
<small>#{{ item.price }}</small><br />
</div>
<div class="col-auto">
<a class="btn btn-sm btn-primary" :href="item.link">{{ __('Details')}}</a>
</div>
</div>
This question already has answers here:
Laravel Displaying image from database
(7 answers)
Closed 3 years ago.
I want to retrieve images from database an display them in webpage directly, how can I make a path?
Here's my view
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6">
<div class="single-product">
{{-- {{$ad->image}} --}}
<img class="img-fluid" src="{{($ad->image)}}" alt="">
<div class="product-details">
<h5>{{$ad->jobC}}</h5>
<div class="price">
<h6>{{$ad->jobtype}}</h6>
<p>{{$ad->details}}</p>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>
#endforeach
Controller Method
public function jaa(Request $request)
{
$de = diligent::all();
$de->image = $request->image;
return view('jobs')->with('dw', $de);
}
How can I display the image? I tried this and it only shows the file name
asset() - Generate a URL to an application asset.
<img class="img-fluid" src="{{ asset('images/' . $ad->image) }}" />
Try this
{{-- {{$ad->image}} --}}
<img class="img-fluid" src="{{ asset('storage/' . $ad->image) }}" alt="">
Make sure to symlink your storage folder as well
php artisan storage:link