In my laravel project image is not showing. I am using voyager admin panel.
In database image name is
banners\March2019\xqem6GRUtqSU6pyWZRDJ.jpg
In blade template using the below code to show image
<img class="d-block w-100" src="{{ url('/images/'.$data->banner_image) }}" data-color="lightblue" alt="First Image">
Through inspect element I got image source as below
http://localhost:8000/images/bannersMarch2019xqem6GRUtqSU6pyWZRDJ.jpg
Here no slash in this path bannersMarch2019xqem6GRUtqSU6pyWZRDJ.jpg. But actual path is banners/March2019/xqem6GRUtqSU6pyWZRDJ.jpg.
Because of this path problem image is not shown.
So my question is why there is no slash ? How can I solve that ?
Someone help me please. Thanks in advance.
I believe this is a bug in voyeger. Backslashes in media asset path when saving to db. You can solve it using,
$output = str_replace('\\', '/', $data->banner_image);
You can see this thread for more details : https://github.com/the-control-group/voyager/issues/2834#ref-commit-0d6bffb
Double check your config/filesystems.php storage variable, you must upload / place your images in the
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
The "root" index here determines where your files would be located once you display it in the view, by default, it's being located at storage/app/public
Please try this below. It should work.
<img class="d-block w-100" src="{{ url('/images/'. '/' . $data->banner_image) }}" data-color="lightblue" alt="First Image">
Related
sorry for this dummy question but i am having a trouble in my django and react app.
i have an endpoint which serves the image name but the image is saved in my local directory and in my react app i just want to append the file name like this
function Condition(props) {
let src = C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
return (
<>
<div className="item">
<a href="#">
<img src={src} alt="medicine item image" />
<div className="desc">
<p className="medicinename">{props.meddata.title}</p>
</div>
</a>
</div>
</>
);
}
If the question is how to refer to a local file, then use the file URI:
file:///C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/media/images/HealthCondition/${props.meddata.image}
Try:
<img src="" alt="description">
I have to put images in my PDF, however the images cannot display, instead it display like image not found or type unknown There are two images that have to display:
from public directory /default.png
from Voyager settings Voyager::image(setting('admitcard.signature'))
Below are my code:
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true)->loadView('pdf', compact('data'));
return $pdf->download($data->name.'-admit-card.pdf');
If I didn't use setOptions then the public image is display but not Voyager Image.
Below are my html:
<img src="{{ URL::to('/') }}/default.png" alt="default">
<img src="{{ Voyager::image(setting('admitcard.signature')) }}" width="70">
I've search but cannot debug, any help would be appreciate. Thanks in advance
For those who have problem like me I solved it like below:
$pdf = PDF::loadView('pdf', compact('data'));
return $pdf->download($data->name.'-admit-card.pdf');
And in HTML:
<img src="default.png" alt="default">
<img src="storage/{{ setting('admitcard.signature') }}" width="70">
I want to show all images that are in nuxtjs, i used the strorage (Laravel ) to save the files
<img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
The link is as follows
http://localhost:3000/storage/example.jpg
but nothing show
I tested this before, Don't you think the problem could be from the controller?
public function index()
{
$files = scandir(storage_path('app/public/'));
$allFile = array_diff($files, ['.', '..', '.gitignore']);
return response()->json($allFile, 200);
}
The problem here is with the image path you need to specify where your image file exactly is, so you did most of its part like :src="'storage/' + row" but since your actual path to your image is something like http://localhost:8000/storage/example.jpg (the base URL of the Laravel app).
If both Laravel and Nuxt.js app serve under the same port and host
You need a leading slash in your src attribute to make an exact path.
<img v-for="(row, index) in files" :src="'/storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
If they are not serving on the same host and port
You have to declare an individual variable for your base URL, preferably in .env file and then refer to it and prepend it to your image src attribute.
So let's say we gonna define it in .env file, then it should be something like this:
//.env
BASE_URL=http://localhost:8000/
Then we will refer to it in our javascript data method (if that was not exists we will use default value as 'http://localhost:8000/').
data: function() {
return {
baseURL: process.env.BASE_URL || 'http://localhost:8000/ OR http://site.test/'
}
}
And in the last step we will prepend it to our image src attribute just like this:
<img v-for="(row, index) in files" :src="baseURL + 'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
I would like to show the picture of a user if there is a user in my object list (profileList), and default/error as defaultProfile.png when no user is found ({{item.userProfile}} is null)
I have searched for similar approaches such as
angularjs: ng-src equivalent for background-image:url(…)
and
empty ng-src doesn't update image
My approach to this problem is:
<div ng-repeat="item in profileList">
<div>
<img src='assets/img/defaultProfile.png' data-ng-src="http://example.com/{{item.userProfile}}.jpg" onerror="this.src='assets/img/defaultProfile.png'" />
</div>
<div>
I am able to show error photo however I am still getting error 500,
GET http://example.com/.jpg 500 (INTERNAL SERVER ERROR)
How to avoid getting http://example.com//.jpg?
Thanks a lot
Your current issue is ng-src is still compiled and evaluated to an invalid url when userProfile is undefined.
A simple solution is to use ternary and check for userProfile before deciding with url should be rendered:
<img ng-src="{{ item.userProfile ? 'http://example.com/' + item.userProfile + '.jpg'}} : 'assets/img/defaultProfile.png'" />
It will guarantee that you will always fetch the default image unless item.userProfile is available.
One approach is to use ng-if and ng-hide:
<div ng-repeat="item in profileList">
<div>
<img ng-if="item.userProfile"
data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
<img ng-hide="item.userProfile"
src="assets/img/defaultProfile.png" />
</div>
<div>
When item.userProfile exists, show the ng-src and hide the default otherwise vice versa.
It works.
ng-show
will run no matter {{item.userProfile}} is null or not.
By changing it to
ng-if
Below code is working:
<div ng-repeat="item in profileList">
<div>
<img ng-if="item.userProfile"
data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
<img ng-if="item.userProfile == null"
src="assets/img/defaultProfile.png" />
</div>
note that my profileList is:
$scope.profileList = {userProfile = null}
Thanks a lot
I am using AngularJS material. I would like to load an image based on the switch status. Below is the relevant HTML code.
If sw_status.sw1 == true, load image truePic.jpg. If sw_status.sw1 == false, load image falsePic.jpg.
<div ng-controller="AGCtrl">
<md-switch ng-model="sw_status.sw1" aria-label="Switch_1" ng-change="onChange(sw_status.sw1)">
Switch_1: {{ sw_status.sw1 }}
</md-switch>
</div>
<img src='img/truePic.jpg'>
<img ng-src="{{sw_status.sw1 ? 'truePic.jpg' : 'falsePic.jpg'}}">