Laravel Blade html image

Question

My image file path is public/img/stuvi-logo.png and
my app.blade.php file path is resources/views/app.blade.php

Inside of my app.blade.php file I use {{HTML::image('/img/stuvi-logo.png')}}
to display an image.
I don't understand why this won't find the image.
What is the root folder of the image() method?

Unalienable

public/img/logo.png can't be available at /img/stuvi-logo.png, I mean, even the file names are different. Is that a typo in the question or your program? – Miso

If you inspect your rendered code, what do you see? Is the url to it correct? – Pyrrho

Answer 1

If you use bootstrap, you might use this -

 <img src="{{URL::asset('/image/propic.png')}}" alt="profile Pic" height="200" width="200">

note: inside public folder create a new folder named image then put your images there. Using URL::asset() you can directly access to the public folder.

Soniferous

Answer 2

Update for - Laravel 11

Laravel Collective HTML will no longer work when Laravel 11 is released. Consider switching to raw HTML or the Spatie HTML package. If you want to automate the upgrade, use Shift.

More information about the change

Update for - Laravel 5

After Laravel 5, this package was deprecated and has been maintained as a separate external package. To continue using it, you need to add this composer require laravelcollective/html. For more details, visit https://laravelcollective.com/docs/6.x/html

Original Answer

Change /img/stuvi-logo.png to img/stuvi-logo.png

{{ HTML::image('img/stuvi-logo.png', 'alt text', array('class' => 'css-class')) }}

Which produces the following HTML.

<img src="http://your.url/img/stuvi-logo.png" class="css-class" alt="alt text">

Painting

It's wrong way , {{ HTML::image('img/stuvi-logo.png', 'alt text', array('class' => 'css-class')) }} i am getting this error " Class "HTML" not found " – Dacey

The url specified is no longer relevant and does not link to/reference the package which has been abandoned. – Avery

Answer 3

as of now, you can use

<img src="{{ asset('images/foo.png') }}" alt="tag">

Polygamist

Also works with background-image property – Podolsk

yes of course, it will work just as expected since it is processed by php. – Polygamist

works on laravel 8 – Norvell

Answer 4

In Laravel 5.x you can use laravelcollective/html and the syntax:

{!! Html::image('img/logo.png') !!}

Corabella

Irrelevant!! The Html package has been removed from Laravel 5. You can still use it but you will need to explicitly include the package inside the framework. Worth saying it I think... – Divinadivination

I corrected the answer to specify the laravelcollective/html package – Corabella

After installing the Forms & HTML collective package (5.3), both syntax from the accepted answer and this one will work. This answer does not take capital HTML .. I stumbled on that .. – Rheumatism

Answer 5

It will look for an image inside of a public/storage folder where you can define your own image folder

<img src="{{ Storage::url($post->image->path) }}" alt="">

Always try to dump what you are looking for first and than pass it to a url method.

Also, you can create your own url() method inside your Image model if you have some

public function url()
{
    return Storage::url($this->path);
}

Then in your blade template you can use this method as follows:

<img src="{{ $post->image->url() }}" alt="">

Bursiform

Answer 6

you can Using asset() you can directly access to the image folder.

<img src="{{asset('img/stuvi-logo.png')}}" alt="logo" class="img-size-50 mr-3 img-circle">

Culinarian

Answer 7

Had the same problem with laravel 5.3... This is how I did it and very easy. for example logo in the blade page view

****<image img src="/img/logo.png" alt="Logo"></image>****

Velites

Answer 8

In Laravel 5.x, you can also do like this .

<img class="img-responsive" src="{{URL::to('/')}}/img/stuvi-logo.png" alt=""/>

Bac

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Sassaby

Answer 9

in my case this worked perfectly

<img  style="border-radius: 50%;height: 50px;width: 80px;"  src="<?php echo asset("storage/TeacherImages/{$studydata->teacher->profilePic}")?>">

this code is used to display image from folder

Arielle

Answer 10

Assuming the file you want to display is public try adding the variable in your Mail builder function.

public function toMail($notifiable)
{
    $img_url = env('APP_URL')."/img/stuvi-logo.png";

    return (new MailMessage)
                ->subject('Test')
                ->markdown('vendor.mail.markdown.message', [
                                                    'data' => $this->data,
                                                    'img_url'=>$img_url
        ]);
}

And then use your 'img_url' variable set in the array in your email blade file.

< img src={{img_url}} alt="Logo" height="50"/>

This worked for me on Laravel 8.xx.

Watershed