I saved some files via MongoDBs gridFS into my database.
I know how to retrieve files just with php in my browser:
header('Content-type: '.$object->file['filetype']);
echo $object->getBytes();
That works perfectly fine. But I now wan't to put the image in a context.
e.g.
<img><?php echo $object->getBytes(); ?></img>
If I put the code
echo $object->getBytes();
in a htmlpage, I just get the image like this:
����JFIFHH��C !"$"$��C���Y"�� ��O!"12AQaq�BR��#b��3Cr��$S����4���%cs�5&��DT�������&!1A"Q2q�#Ba��?�( �#�EUDDUU�#��(�?2� ��.h#k���.��d�M���(��=�]��Nk��E�gZz�GI�Вr���~+x������<{YZSm�n�N I�DAmDU������G���U:���H�6J̺'!lV�������D:H2��S��7��U;����7����������n��wV$�ʞ�i|��wP����?Qx۾�/�K'�:=���i�E�0)�E��4OU�G�W��`t] �������.�j��='�/�:9�V����봺a_}2����a_�D��J[r�J���f�6�B<���ѿc���=8�Q��1!("��B���⅝4<#��L���K�Iy�"���?�6�6�a7�k����%�F6�y��� v��
and so on...
does anybody know how I can embedd an image into a website???
Thanks
You should add a new PHP page that returns the image (with appropriate content-type and content-length headers) like your first sample above. Say that page is called "image.php". In your "main" page, then, you should construct an image tag like:
<img src="/path/to/image.php?..."/>
Where "..." is replaced with some query string to look up and serve the image you want (the string representation of the GridFS file's ObjectId in the _id field might do well here, or some other unique identifier).
If you're looking for in-doc images you could try
<img src="data:image/png;base64,����JFIFHH��C !"$"$��C���Y..." />
But dcrosta's method may be preferred depending on your overall intent.
You'll have to plug in the correct image type and encoding (or re-encode).
Related
I need to dynamically get the root URL from a page to set as part of the Open Graph tags that will fetch the desired image. The closest I got was with ${request.requestURL}, but it returns the whole URL, like:
https://localhost:8080/abc/123/example/example.jsp
But I would like for it to return just the root URL, like:
https://localhost:8080/
Is there a way to do this?
This is the header of a page that will be the product page of a e-commerce. So, I would need to get the root URL of whatever part of the website the user is in to fill in with the product-specific URL. I've tried lots of methods, like ${request.requestURI} and ${request.contextpath} but none of them return what I want.
Don't know if it's the optimal solution, but I achieved what I needed assembling the url like this:
${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}
We want to develop a widget to upload images to containers. This is a very well documented task:
1.- Object Storage Tutorial
2.- Fireware-Wiki
3.- OpenStack Object Storage Docs (Swift)
With all this you can manage to get (download), upload, delete files in a container. This is relatively clear.
On the other hand, we want to develop another widget to display images stored in a container. I think in something like this to show them:
<img src="public_object_url"/>
But I do not know how to do that. Where I get this public URL? Is there a public URL? Is it get in some step during the uploading process?
I am a bit lost how to do that. Any help would be highly appreciated.
Thanks in advance.
EDIT 1
We get blocked displaying images once they are downloaded.
A look inside "img" tags shows this:
what is the string returned by URL.createObjectURL(). If we look inside this link, the browser displays this:
We have decoded the string coming in the property "value" and the image is there!
To get the image from the object storage server we used a very similar code that the one used in the operator Álvaro recommended.
objectstorage.getFile( containerName,
reports[i].urlImagen,{
token: token,
onSuccess: onGetFileSuccess.bind(null, i),
onFailure: onGetFileFailure
});
function onGetFileSuccess(index, picture){
downloadedPicsCont--;
reports[index].urlImagen = URL.createObjectURL(picture);
if(!(downloadedPicsCont > 0)){
MashupPlatform.wiring.pushEvent('reports_output', JSON.stringify(reports));
}
}
The picture variable has the following structure, which seems to be ok too.
What is it happening?
EDIT 2
Finally, we found the reason. We were downloading images that were created directly from the cloud and not with objectStorageAPI. In you upload images from the cloud, when you download them you get them inside cdmi objects so the URL.createObjectURL doesn't not work as expected. In the other hand, if you upload them using objectStorageAPI, when downloading them, they come in raw format, so the method works correctly.
As far as I know, FIWARE Object Storage needs authentication, so there are no such public URL. But... you can download the image using your credentials and then use the URL.createObjectURL method for getting an URL usable in the src attribute of the img element.
It's a bit old, but you can use this operator as reference.
The application I'm working on needs to be able to send images as a response. I'm having a bit of trouble getting this to work properly. I tried making a response message string with "Content type images/jpeg" after making a simple get request, and what pops up in the browser is a broken image symbol, so I guess it knows it's supposed to be an image. My images are stored in the database as hexidecimal. How do I format the response for the FCGXFPrintF(...) message to make an image pop up. I tried
Content-Type: image/jpeg\r\n\r\n
<a bunch of hexidecimal>
but that doesn't work. Can someone give me an example of how to format the message, and an example of actual image data for me to test (because my image data might be broken)
Thanks
Assuming you have an image called image.jpg, paste this into a file called go, then type
php -f go
and you will see what your C++ should generate:
<?php
header("Content-type: image/jpeg");
readfile('image.jpg');
?>
I want to embed an HTTP call which returns a png image into an html page.
I will run the page on github's gh-pages if that makes a difference.
The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png
Note that sometimes the url doesn't return the png as the service is sometimes down.
I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.
Do I use an iframe, form, javascript?
Thanks! Scott
[I might as well answer properly]
When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.
However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.
Here's the concept in vanilla-js:
img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";
You can also see it in action here: http://jsfiddle.net/BwJeC/
You could use XHR to load the binary data from the external, dynamic page and set the content of the image.
This question, is very much similar
Or this
I really don't understand why you want to POST.
Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
The best would still be to to a simple get call:
<img src="/dynamicallyGeneratedPicture" />
with a route or script that return a document of type image.
Images are stored in the folder name upload in my website directory.
can anybody tell me how will i display it in another page name show.php
This question might be very basic level but I am very new to php.
Scan the directory for all image names and then output the image tag with the src set to the path for the image.
<img src="/upload/name-of-image-file-here" />
assuming the upload directory is web-accessible and whatnot. If not, then you'll need to do a script to handle the output of the image, of which there are plenty of sample questions/answers on this site.
You want to use PHP to scan the directory with the images in it and then generate HTML to show them.
You might want to look into the Directory Iterator object. You can use that to loop through the images and then generate the HTML as needed.
For getting files, you might want to use the following code (based on this PHP Documentation sample):
<?php
$iterator = new DirectoryIterator(dirname(__FILE__));
foreach ($iterator as $fileinfo) {
if ($fileinfo->isFile()) {
//Add filetype check here and then echo the HTML
echo $fileinfo->getFilename();
}
}
?>