Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag 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:

User generated image
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:

User generated image
I don't get the image, I get the actual HTML code.

What do I need to do differently?
Avatar of David Favor
David Favor
Flag of United States of America image

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.
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.
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
Avatar of 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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank you!