This is for a small school assignment.
We are trying to create and deploy a search website of local cricket players.
I have everything running locally the only thing is I need to use is asset on my images to get them to deploy properly.
currently I have in my local
<img src="/images/{{$player['image']}}" class="playerimg">
I have tried concatenating it but to no avail.
The reason I have a variable $player is because we are pulling data from two tables and looping around the array.
Any help would be greatly appreciated
Edit: Solved Thank you all for your help ! code below
<img src="{{ asset('images/'.$player['image']) }}" class="playerimg">
Laravel - Helpers: asset()
https://laravel.com/docs/master/helpers#method-asset
<img src="{{ asset('images/'.$player['image']) }}" class="playerimg">
There are several ways to display the image.
I'm assuming index.php in public folder.
asset() Generates a URL to an application asset (code)
Use for files that are directly served such as CSS, images, javascript.
Only accepts a direct path.
{{ asset('images/'.$player['image']) }}
// http://www.example.com/public/images/abc.png
If you stored your image in storage folder then,
<img src="{{ storage_path('images/'.$player['image']) }}">
Make sure config.php should be configured properly for storage_path.
Related
I have a Vue component located at resources/js/modules/MyComponent.vue and inside it, I'm trying to use a local image as an src for the img tag, and the image is located at public/assets/myproj/image/myimage.png.
I've tried using the following :
<img src="#/assets/myproj/image/myimage.png"/>
<img src="require('assets/myproj/image/myimage.png')"/>
<img src="../../../public/assets/myproj/image/myimage.png"/>
<img src="/assets/myproj/image/myimage.png"/>
but none of them work...
I know this is a straightforward question but I hope someone can help me because I've been trying to find an answer for almost an hour now but I still can't figure it out.
If you want to use this in javascript you can do like this
<img :src='getImage(name)'/>
then you will need to import your image in your javascript code
getImage(name){
return require(`#/assets/myproj/${name}`);
}
I have an image stored in an S3 bucket that is linked to my Laravel app. How can I display this image in a blade template?
So far I have...
<img src= "{{Image::make(Storage::disk('s3')->get('image/' . $filename))}}">
But this is not returning anything.
Does anybody have an example I can see?
The S3 driver has a url function that'll get you a temporary, signed URL to the S3 object, so all you'll need to do is:
<img src="{{ Storage::disk('s3')->url($filename) }}">
I have a image that want show in slide show I use html tag <img src="">,
I'm new in laravel and I don't Know How to show image in my blade.
How I can use <img> tag in laravel?
<img src="{{ asset('/public/upload/image.jpg') }}">
If your image in public folder
If you have stored images inside laravel public directory then, you can use asset which refers to public/ directory.
If you have image at public/images/abc.png then, you can add image in view like this:
<img src="{{ asset('images/abc.png') }}">
I want to show picture form another folder. But why it's not working?
<img src="/picture/Capture.JPG" style="width:600px;height:400px">
My folder name is picture and image name is Capture.JPG
To print images ,css and js files correct path laravel have a default function asset()
Try this
<img src="{{ asset('picture/Capture.jpg') }}" style="height:400px;width:400px" >
I find my solution last night.
At first i create a folder in public folder name images. Then i store the picture. And the code formet is here.
<img src="{{url('/images/6.JPG')}}" alt="Image"/>
I am trying to get the full path of my image to work across the board instead of using image/blah/blah on my page I have them working with the blade template engine
{{ HTML::style('css/bootstrap.css'); }}
{{ HTML::style('css/bootstrap-responsive.css'); }}
{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery.js'); }}
But I am trying to use background-image for a menu bar
background-image: url(images/transparentBackground.png)
Is there a way to use Blade templates to get that image to load the full path?
If I use
background-image: url({{ HTML::script('images/transparentBackground.png'); }})
It doesnt work and returns errors.
Well, first of all, you'd want to use
url({{ URL::asset('images/transparentBackground.jpg') }})
instead of
`HTML::script()`.
That would work if you are using inline styles.
If you are trying to have blade parse a linked stylesheet however, that's just never going to work. Nor should it. In that case, you might want to look into using something like Sass and Compass. With the right configuration, you can have full paths to your images generated automatically.
I don't understand your problem very well. Why do you need a full path? This is css. Images folder has to be near a css file.
In your case try background-image: url(../images/transparentBackground.png)
-- public (folder)
---- css/style.css
---- images/transparentBackground.png
You can use helper functions Here
Here is an example of background-image using helper function
background-image: url("{{ public_path('images/bg_invoice.jpg') }}");
public_path is a helper function to the path of public folder in your Laravel app and images is the nested folder in public. Thanks
If you are writing inline styles (via the style="" attribute in the HTML tag, then what #Rogier suggested would work.
If you want to use blade to generate CSS then you could do it by creating a CSS controller and passing your variables through that to a blade template to render the CSS (remember to set the content-type header to text/css).
HTML::image('url/to/image.jpg', 'alt text');
OR
CAN BE USED
img src="{{ URL::to_asset('url/to/image.jpg') }}
For Laravel 5 just do this
style="background-image:url({{ asset('Images/jamb.jpg') }});"
And like #Khandad Niazi said its just for inline CSS