Click here to Skip to main content
15,936,362 members
Please Sign up or sign in to vote.
3.00/5 (2 votes)
See more:
Hi,

I want to display image... the url of this image is stored in a php variable. Now i want to use this variable in image tag.. I am using following piece of code but it does not display image... Kindly guide me how i pass image url through php variable in image tag in javascript...

Thanks in advance...

PHP
element.html('<div class="data"> < img src=< ?php $imgPath="pages/image-0.png"; echo $imgPath; ?> height="500" width="440"></div>');



following code is also tried but the output is just displaying double quote , semi-colon, question mark and angle braket.... as given below

"; ?>

the code is:

PHP
element.html('< div class="data">< ?php $imgUrl="pages/images-3.png"; echo "< img src=\"".$imgUrl."\" height=\"500\" width=\"440\">"; ?>< /div>');
Posted
Updated 4-Sep-12 22:35pm
v3

1 solution

Can't quite see where you're going wrong, I'm a bit tired. Here's some code that puts php vars into js vars, ready for use.

HTML
<?php
	$imgFolder = 'img/';
	$imgNames = array( '2stars.png', 'close.png', 'navbar2.png' );
	$numImages = count($imgNames);
?>
<!DOCTYPE html>
<html>
<head>
<script>
function myOnInit()
{
	var numImages = <?php echo $numImages; ?>;
	var i, imgNames = [];
	<?php 
		echo "imgNames[] = [";
		echo "imgNames = [";
		for ($i=0; $i<$numImages; $i++)
		{
			if ($i != 0) echo ", ";
			echo "'$imgFolder$imgNames[$i]'";
		}
		echo "];\n"
	?>
	
	for (i=0; i<numImages; i++)
	{
		img = document.createElement('img');
		img.src = imgNames[i];
		img.setAttribute('width', '440');
		img.setAttribute('height', '500');
		document.body.appendChild(img);
	}
}
</script>
</head>
<body onload='myOnInit();'>
</body>
</html>



After it's run, if you look at the page source, the myOnInit function looks like this:
JavaScript
function myOnInit()
{
	var numImages = 3;
	var i, imgNames = [];
	imgNames[] = ['img/2stars.png', 'img/close.png', 'img/navbar2.png'];
	imgNames = ['img/2stars.png', 'img/close.png', 'img/navbar2.png'];
	
	for (i=0; i<numImages; i++)
	{
		img = document.createElement('img');
		img.src = imgNames[i];
		img.setAttribute('width', '440');
		img.setAttribute('height', '500');
		document.body.appendChild(img);
	}
}
 
Share this answer
 
v2
Comments
Misbah1 6-Sep-12 0:59am    
I have implemented it but no output is displaying on page...
enhzflep 6-Sep-12 1:11am    
Riight... And how am I supposed to offer any advice in response to that?
I wrote it, tested it then posted it. The code works - something is amiss with your implementation. :shrug:

Make sure the quotes ' and " are used as shown - I don't believe the 2nd echo statement will work if they're '"..."' instead of "'...'"

Make sure the folder path is correct. Make sure it has a / at the end of it. If images are in same folder as script, set $imgFolder to "" or "./"

Lastly, right-click the page then hit display-source. What do you see there?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900