Avatar of Bruce Gust
Bruce Gust
Flag for United States of America asked on

How do I display an uploaded image in Laravel dynamically?

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?
LaravelPHPWeb Development

Avatar of undefined
Last Comment
Bruce Gust

8/22/2022 - Mon
David Favor

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 Fell

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 Fell

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
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Bruce Gust

ASKER
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?
ASKER CERTIFIED SOLUTION
Scott Fell

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Bruce Gust

ASKER
Thank you!