display image from database in react in laravel - image

How can i display image form database ? in react ? i am using laravel as backend .this is my table with image
i am using {this.props.obj.image} and this is showing the file as shown below
as you can see it is showing the file it is not displying image .searched web but it says to import path but all the tutorial are importing statically
my image location is Assets/Admin/Image .
How can i resolve this

When you run a laravel project, you are already in the public folder so you don't have to specify the public folder in the path and "assets" is just a laravel-defined method for accessing the contents of the "public" directory so you shouldn't specify that in the path too.
So you should do something like this:
<img src="http://localhost:<your_port>/images/{this.props.obj.image}" alt="hello image" height="200" />

You are storing just the name of the file in the database, to load the image you need to complete the full path of the image.
If you are storing your files in:
{laravel_root_folder}/public/assets/images/
Then you should do something like this (btw I know nothing about react but this should kinda work). I'm asuming you are running your server in localhost in the 8000 port:
<img src="http://localhost:8000/assets/images/{this.props.obj.image}" alt="hello image" height="200"/>

You can not have directly access to public/storage/images from react (front end side ) for that you have to use following method to generate the URL of image and then just return that url to react side while requesting and use that url in < img src={url} /> to display the picture
https://laravel.com/docs/5.4/filesystem#file-urls

Related

How to retrieve files from S3 in Laravel Vapor

I'm having a problem loading images in my html dynamically after storing them successfully with Laravel Vapor.
I have followed this documentation provided by laravel vapor to store files, and it works like a charm. I copy my uploaded files from the tmp directory into the root of my S3 bucket and then store the path of that file in my databases images table so that later I can return the file path to my front end and display the image in my browser.
Unfortunately this is always returning a 403 status code from AWS S3.
I could fix this by making my generated S3 bucket public, but that would raise a security issue. I believe this should work out of the box, not sure where I could have gone wrong... any ideas?
I am returning the uploaded image url using the Storage facade.
use Illuminate\Support\Facades\Storage;
return Storage::url($image->path);
Where $image->path is the file path in my S3 bucket.
I'm sure that the storage facade is working correctly because it is returning the correct url with the file's path.
I got the solution to this problem. I contacted laravel vapor support and I was told to set the visibility property for my file to public when I copy it to the permanent location, as stated in Laravel's official documentation here.
So after you upload your file using the js vapor.store method you should copy it to a permanent directory, then set it's visibility to public.
Storage::copy($request->path, str_replace('tmp/', '', $request->path));
Storage::setVisibility(str_replace('tmp/', '', $request->path), 'public');
I also noticed that your can set the visibility of the file directly in the vapor.store method by passing a visibility attribute with the respective value.
vapor.store(file, { visibility: 'public-read' });
As a side note: just 'public' will return a 400 bad request, it must be set to 'public-read'.

Access to images in the public directory with Symfony 4

In two Symfony 4 instances, I get different results with the same code.
In a twig template, I have the line
<img src="{{ asset('images/DM_logo.jpg')}}"/>
In the online server, all works well: i get the image and the generated URL is /images/DM_logo.jpg for the absolute URL http://mysite.mydomain.com/images/DM_logo.jpg
But, locally, with the access to http://localhost/mysite/, the generated url is /mysite/images/DM_logo.jpg for the absolute url http://localhost/mysite/images/DM_logo.jpg which generate a NotFoundHttpException.
If i change the template to
<img src="{{ asset('public/images/DM_logo.jpg')}}"/>
it works locally but not online...
I doesn't find how to use the same code online and locally. Advices?
configure this
# config/services.yaml
parameters:
router.request_context.host: 'example.org'
router.request_context.base_url: 'my/path'
asset.request_context.base_path: '%router.request_context.base_url%'
https://symfony.com/doc/current/routing.html#routing-generating-urls

the server responded with a status of 404 (Not Found) Failed to load resource

I am facing issue in accessing public folder of laravel.
I am on ubuntu 17.10.
I am trying to run the app on localhost.
I am accessing like this:
<img src="{{URL::asset('public/assets/img/person.jpg')}}"/>
Also when checking the its source , its path is shown correct :
<img src="http://localhost:8000/public/assets/img/person.jpg"/>
It may seem duplicate but I've tried most of the solutions present on net.
You are calling the wrong directory
Instead of
<img src="{{URL::asset('public/assets/img/person.jpg')}}"/>
Use this instead
<img src="{{asset('assets/img/person.jpg')}}"/>
Considering the assets folder is existing in public folder.
I hope this will solve you :)
Just in case file had cached on your browser try to add query string on your file by doing this so browser will treat it as a new file
You shoud use Storage::get() to retrive the file url. See the docs
anyway, you don't need that public in the path:
Switch
<img src="{{URL::asset('public/assets/img/person.jpg')}}"/>
to
<img src="{{URL::asset('assets/img/person.jpg')}}"/>

laravel is saving the wrong image link in db

I am trying to save the image link in the db like this
'photo' => asset('uploads/'.$fileName2)));
and in the db it is being saved as
http://localhost:8000/uploads/8730.jpeg
irrespective of the url in config file
APP_URL=http://example.com
asset() helper function generates
a URL for an asset using the current scheme of the request
https://laravel.com/docs/5.3/helpers#method-asset
Then, When you access to your laravel app via http://localhost:8000/, asset('uploads/'.$fileName2) will returns http://localhost:8000/uploads/....

image display in codeigniter shows error

I am relatively new to Codeigniter, basically I choose CakePHP to develope applications. Now I am editing a Codeigniter Project, build in version 2. I have some images in my table and I need to disply it.
I have created a helper file general_helper.php in which I have a function
function image_url(){
return base_url().'uploads/';
}
So in view page , I tried to display image by
<img src="http://localhost/myapp/uploads/vendors/images/Desert.jpg" />
My directory structure is :
myapp
-uploads
-vendors
-images
-logos
But its not showing the image ! When I tried to put the image path in the url, it shows 404 error :( whats wrong ?
Codeigniter base_url function requires folder path relative to site's base url passed as parameters. Please try use below code.
First in constructor, please load your library -
$this->load->library('general');
Then please pass your uploads directory as parameter to base_url
function image_url(){
return base_url('uploads/');
}
If images are not uploading please do check image type.
Also try use log_message('info','info_message') function to record base url.
Please refer http://www.codeigniter.com/userguide2/general/errors.html

Resources