I can't seem to display the image.
I'm writing this code in document_root/admin and the img file is located on document_root/img/food
When I tried using this code
<img src="<?php echo htmlentities("$_SERVER[DOCUMENT_ROOT]/".$row['food_img']); ?>" width="100px"></img>
The HTML from the PHP shows this
This is the output
before you bash me, I'm just a student.. still trying to learn PHP and the CRUD for image file
I have a page on my site in Magento where the files inside it are shown.
The images with my php code show them without problems.
The pdf, ai, eps and svg files do not show them and do not allow me to see any preview.
How can I do?
Thanks
P.S. I don't want to use Imagemagick and iframe for this
You can do this using HTML object tag :
<object data="http://www.africau.edu/images/default/sample.pdf" type="application/pdf" class="pdfview" width="700" height="600" >
<p>Alternative text - include a link to the PDF!</p>
</object>
<img src="http://localhost/research/coding-challenge/SampleSVGImage_23kbmb.svg" />
But for .ai and .eps no option to preview. You can do only thing convert that into .pdf or image format
For some reason, Chrome is displaying the SVG without the images in its Image tags.
Here is a sample from my SVG:
<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>
blocker.png is a local file, but I also tried uploading it to imgur, but that didn't work either.
Here is the svg tag:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Here is what it looks like locally:
http://i.imgur.com/BDP8KpG.png
Here is what it looks like on a live webpage:
http://i.imgur.com/KVuxLI1.png
As you can see, the two players are missing. This doesn't happen when I upload the SVG online, but when I try to link that URL to my page, the same thing happens
Not sure if it's relevant, but here is the HTML code for the page:
<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title>
<style>
img{
width: 100%;
height:auto;
max-width: 800px;
}
</style>
</head>
<body>
<div>
<img src="svg.svg"/>
</div>
</body>
</html>
PaulLeBeau's answer is right. But another solution is to use an embed tag instead of an img tag for the picture.
<embed src="svg.svg">
Here are some ways to embed svg images in HTML.
Another solution that worked for me is, open SVG image in any editor (Vs code or Notepad++) and replace
xlink:href="data:img/png;base64,
to
xlink:href="data:image/png;base64,
img to image.
Hope this helps if someone is still looking for it.
When you load an SVG into a webpage using an <img> element, the SVG has to be self-contained. It cannot link to third part resources like you are doing by linking to the PNG files. This a privacy restriction imposed by the browser.
Possible solutions are:
Convert your PNG to Data URI format and include them in your SVG that way.
Convert your blocker PNG(s) to actual SVG elements, such as a <path>.
I happened to find out that Chrome [v 58.0.3029.81 (64-bit)] doesn't show the image inside svg if the image file is not located at html root directory.
The .svg and the embedded .png files were placed in /images -folder, the .svg content came up right in Chrome, but not the embedded .png. When the .png was copied to (../) the html root, Chrome works.
However, Firefox [v 52.0.2 (32-bit)] seems to work fine when .svg and .png are in the same /images folder.
Edit: Actually in my case I load the svg with d3.xml(..) method for getting js handle to the actual svg elements.
Add this to the .htaccess file in the root:
AddType image/svg+xml .svg .svgz
This is what I had in the Headers >> Network >> Content-Type. Should be 'image/svg+xml' not 'txt/plain....'
By adding the above code, my SVGs rendered within img tags.
I am building a blogging website and I am facing troubles when I try to upload a photo. I need the photo to be pasted in the webpage. I know that javascript can do that, but it only affects the current session of the webpage. I need to permanently embed that image into the webpage as a child of this div element, for example:
<div id="img-wrapper"></div>
Everything is OK with PHP file uploads. How can I do that with PHP?
I assume its not an advisable solution as it increases the page size, but you can do this in the following manner:-
Some examples:
HTML:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
CSS:
div.image {
width:100px;
height:100px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Here is a sample code
https://jsfiddle.net/casiano/xadvz/
For an online image to base 64 encode Click here
I've got an app that takes an SVG as input and converts to a PNG as output. I've run into a problem where if the SVG has grouped items using the tag, that content gets rendered way off to the right and down on the SVG.
This only happens using IMagick. If I open the SVG in Illustrator or Inkscape for PC, it looks fine. Here's what the SVG code looks like:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2400px" height="3200px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="SvgjsG1048" transform="rotate(0 1200 1600) translate(30.927835051559143 41.23711340207863) scale(0.9742268041237008 0.9742268041237009) " x="30.927835051559143" y="41.23711340207863">
<image id="SvgjsImage1049" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="aerosmith.png" width="2400" height="3200"></image>
</g>
</svg>
and here's the code I'm using to pull in and render:
// setup the SVG
$svg_front = new Imagick();
$svg_front->setBackgroundColor(new ImagickPixel('transparent'));
$svg_front->readImage($json->imageFront); // pull in the SVG image
// convert the SVG to PNG # 200 dpi - yes, it works!
$svg_front->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
$svg_front->setImageResolution(200,200);
// set image format
$svg_front->setImageFormat('png');
// render the SVG
echo $svg_front;
Nothing out of the ordinary here. Removing the code to set the resolution doesn't make any difference, and I've tried resetPage to no effect as well.
Now, if I remove the tag and leave the image in there, then the SVG renders with no issue. However, I can't control whether the app sends grouped items or not, and IMagick needs to render it no matter what.
Here's the image when it gets rendered to PNG with a tag in the SVG: http://brainboxinteractive.com/bad-svg.png
And here's what is should look like: http://brainboxinteractive.com/what-it-should-look-like.png
Inkscape is installed on the server, so IMagick/ImageMagick is using it so I'm not sure where to start debugging and fixing this issue. Any help would be appreciated!