We help IT Professionals succeed at work.

How do I display an uploaded image in Laravel dynamically?

Bruce Gust
Bruce Gust asked
on
I'm using TinyMCE with Laravel 6.

I've got an Admin Suite where I'm creating the content for any one of a number of pages. The about page html code looks like this:

<a href="http://new.brucegust.com/nomas/assets/img/punky-150.jpg" target="_blank"><img style="float: left; margin: 10px;" src="http://new.brucegust.com/nomas/assets/img/punky-150.jpg" alt="" /></a>The NOMAS (Neonatal Oral-Motor Assesment Scale) was developed in 1983 by Marjorie Meyer Palmer MA, CCC-SLP and has since become a reliable tool for the evaluation of neonatal sucking patterns in pre-term and term infants. The NOMAS provides a comprehensive description of the infant's feeding patterns and enables the examiner to identify normal oral-motor patterns and to differentiate disorganized from dysfunctional patterns. The NOMAS is used for pre and post-test measurements to determine treatment effectiveness; to record developmental and changing patterns; and to confirm oral-motor dysfunction or disorganization in the poor feeder. It is important to accurately identify the infant's feeding pattern so that appropriate treatment may be prescribed. Performance on the NOMAS is predictive of developmental outcome at 24 months of age.

Open in new window


In my Admin Suite, after I've inserted it into the database, it looks like this:

screenshot of admin page
But when I go to my actual page, whose code looks like this:

@extends('layouts.satellite')
@section('content')
<!-- Section: intro -->
<section id="intro" class="intro">
	<div class="satellite-content">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 satellite_row">
					{{ $pages->body }}
				</div>
			</div>
		</div>
	</div>
</section>
@endsection

Open in new window


I get this:

about page
I don't get the image, I get the actual HTML code.

What do I need to do differently?
Comment
Watch Question

David FavorFractional CTO
Distinguished Expert 2018

Commented:
Best to publish the actual URL for testing.

You'll have to look at the actual rendered HTML, consider your code, then determine the problem.

Note: Just guessing, from... what seems to be a monospace font... might be your HTML is wrapped in a <pre> ... </pre> tag for some reason, which relates to code you've written.

Better to have an actual URL to test.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
What I think is happening is your editor is safely converting entities.   https://www.tiny.cloud/docs/configure/content-filtering/#entity_encoding

Check the tinymce code to see if it is set to Raw or Named.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
Fyi, what is missing from your question is the viewing the source of the final page. You have an image and what matters is the html code. I bet when you view source for that bit of code it will render like

&#x3C;a href=&#x22;http://new.brucegust.com/nomas/assets/img/punky-150.jpg&#x22; target=&#x22;_blank&#x22;&#x3E;&#x3C;img style=&#x22;float: left; margin: 10px;&#x22; src=&#x22;http://new.brucegust.com/nomas/assets/img/punky-150.jpg&#x22; alt=&#x22;&#x22; /&#x3E;&#x3C;/a&#x3E;The NOMAS (Neonatal Oral-Motor Assesment Scale) was developed in 1983 by Marjorie Meyer Palmer MA, CCC-SLP and has since become a reliable tool for the evaluation of neonatal sucking patterns in pre-term and term infants. The NOMAS provides a comprehensive description of the infant&#x27;s feeding patterns and enables the examiner to identify normal oral-motor patterns and to differentiate disorganized from dysfunctional patterns. The NOMAS is used for pre and post-test measurements to determine treatment effectiveness; to record developmental and changing patterns; and to confirm oral-motor dysfunction or disorganization in the poor feeder. It is important to accurately identify the infant&#x27;s feeding pattern so that appropriate treatment may be prescribed. Performance on the NOMAS is predictive of developmental outcome at 24 months of age.

Open in new window


It is also possible that laravel is converting this too.  https://laravel.com/docs/6.x/blade#displaying-data  see HTML Entity Encoding
Bruce GustPHP Developer

Author

Commented:
Gentlemen!

Thanks for weighing in!

Based on your counsel and suggestions, I was able to learn a little bit more about my dilemma, but I'm still not where I want to be.

Apparently, Laravel AUTOMATICALLY sends data through htmlentities, so that would explain why any HTML characters are being displayed as text.

I've been able to incorporate a work around, but it's a band-aid at best. Instead of doing this:

{{ $page->body }}

I'm doing this:

<?php echo $page->body; ?>

In addition, when I'm referring to images in TinyMCE, I'm using absolute URLs rather than the asset helper. It's working, but I don't want to go back through every reference to an image in the database and change every img tag.

So, I want something like this:

<img src="{{ asset('assets/img/my_graphic.jp') }}">

...to be entered into the database and have it properly rendered / processed by my blade.php.

How do I do that?
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
In that case, you have all of your wysiwyg data all stored in the same place. If you are not letting the public post to your admin area or it is at least a small group of trusted people, then it should be safe to unescape.

https://laravel.com/docs/6.x/blade#displaying-data
Displaying Unescaped Data
By default, Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:

Hello, {!! $name !!}.

Be very careful when echoing content that is supplied by users of your application. Always use the escaped, double curly brace syntax to prevent XSS attacks when displaying user supplied data.
Bruce GustPHP Developer

Author

Commented:
Thank you!