I am having trouble accessing images in the chrome packaged app. These images are stored locally. Code works fine in the browser.
following image tag
<img ng-src="pics/{{employee.pic}}">
I am using angularjs.
Thanks,
Niranjan
See:
https://developer.chrome.com/apps/app_external#external
What you have to do is fetch the binary contents of the image with XMLHttpRequest as a blob, then convert that blob to an object URL, and that's the URL you set as the src attribute of the img. It's easier than it sounds, and the cited web page gives you the code.
Related
I would like to make a web app using Google Apps Script where users get pages of a pdf shown one by one.
Using a pdf library I can get the base64 data of each page of the pdf. But using none of these ways for displaying it works:
<object type="application/pdf" data="data:application/pdf;base64,...">
<embed src="data:application/pdf;base64,...">
<iframe src="data:application/pdf;base64,...">
Displaying an image using <img src="data:image/png;base64,..."> does work.
All mentioned methods do display the single pdf page when putting it in an html-document.
I thought it had to do with the https requirement mentioned on https://developers.google.com/apps-script/guides/html/restrictions, but looking at How can I refer to a Data URI in https? I learned the data URI should be https (since the Google web app is served over https).
Any suggestion, like forcing the data URI to be 'interpreted' as an https-URI OR converting the pdf page to an image (not prefered, since I figure it would produce unnecessary overhead), is welcome.
Since the single page pdfs aren't needed to be saved like that, saving each page on Google Drive and using its file-URL would also produce overhead (and is thus not prefered either).
If your pdf is located on your Google Drive, you can embed it with the preview link:
<iframe src="https://drive.google.com/file/d/XXX/preview"></iframe>
Whereby XXX is to be replaced with the file id.
Make sure to share the pdf as Anyone on the Internet with this link can view.
I'm building a very simple component in Vue to preview PDF files and images in a modal.
I'm using Vue Boostrap's modal component. In the body of the modal I have the following line:
<embed :src="fileSrc" type="application/pdf" height="100%" width="100%">
fileSrc is a prop that the component receives.
When the modal is launched, the PDF visualizer doesn't show and Google Chrome emits a warning saying:
Flash is blocked on this page
I have allowed flash to be displayed on the page but still doesn't work.
If I remove the type="application/pdf" attribute and the fileSrc is a JPEG file, it shows up just fine.
I've also tried with the <object> tag with no luck.
What should I check? What am I missing?
Edit: Why is this question not a duplicate?
Because I wan't to be able to use the <embed> tag to support not only PDF but also images for previewing. The examples in this page work without enabling Flash and without warnings, so I should be able to reproduce this behavior.
I found the answer.
The files I was trying to display with the <embed> were being uploaded to a bucket in AWS S3. When uploading the files (with a PHP script), the Content-Type metadata needed to be set accordingly to the file (i.e. application/pdf for PDF files).
The files were being uploaded with a default Content-Type value, thus the browser didn't know what to do with it once placed in a <embed> tag (the Content-type is used to determine which plugin to choose to display).
I found this method to be very easy to implement as a generic file previewer.
I have an Angular 4 front-end application accessing images that are stored on a private S3 bucket. The images are only accessible via an authenticated API call. An example image url would be https://my-app.com/api/aws/s3/download?key=banner.jpeg.
When I am on a page such as https://my-app.com/#/ (I am using hashbang for the urls), I can see the image I want with the following img tag: <img src="/api/aws/s3/download?key=banner.jpeg" /> in Chrome and Firefox.
However, in IE11/Edge, this doesn't work. Using the absolute link instead of the relative one also does not work in IE/Edge.
I do have a base href set up as ./ in my index.html, but this is for my Tomcat server to load my Angular app.
Any thoughts as to why I can't get the image to load?
edit (7/17/17 at 2PM): I see an aborted message in the network tab for IE's dev console for each image. Could this be a SSL issue? Why would Chrome and FF be fine.
I am making a web application using ASP.NET and I noticed that only Internet Explorer loads images properly that are on my home computer (../Desktop/WebsiteImages/xxxx.jpg), whereas the images won't load on Chrome or Firefox. If I want the images to display on Google Chrome or Firefox, I have to upload the images on a web hosting site such as imgur instead of having them all on a file on my computer. Is this a known bug?
If I want the images to display on Google Chrome or Firefox, I have to
upload the images on a web hosting site such as imgur instead of
having them all on a file on my computer. Is this a known bug?
It is not a bug.
Web Server will never serve a file which is located outside of a web application (unless you create an image handler by yourself).
If you are new to web application, easiest way is to place images inside ~/images/ folder inside your ASP.Net application.
Then you can call the image like this -
<img src="#Url.Content("~/Images/MyImage.jpg")" alt="My Image"/>
showing local file like file:// is not allowed in Chrome and Firefox for security reasons by default, but this answer shows you how to change those settings. it's not recommended to use local filepath for your image
I have developed an application using HTML 5. To make the application compatible with the mobile devices I have used cordova/phonegap.
Now the problem is that, the PDf files which is there inside the application is only getting downloaded, when clicked on the link. I need to get it opened in the browser, when clicked on the link. It works fine with the PC. But not with the mobile devices.
I stored the link to a variable and passed that variable to google. Now using some sort of services from google, the link is getting opened in the browser.
I tried installing inAppbrowser plugin also.
window.open(Furl, '_system', 'location=yes');
This was the line of code used, where Furl is the name of the variable, into which, the url address of the pdf file is passed.
This line of code works fine, when url address of a webpage is passed to the variable. But not with the pdf files.
Apart from that idea, is there any other solution for this problem?
Can someone help me out with this problem?
-Thank you
As stated already on a comment, it is possible on modern browser since they have in-built PDF viewer. This isn't the case for Android or iOS currently. What you could do is to convert the PDF to PNG image and then show that. There is a PDF2PNG plugin available for this purpose. Also, if you only need to support iOS 6 & 7, you can take a look at the PDF Viewer plugin.