I am wondering if someone can help me with a problem I am encountering with iPhone/iPad. I have an email the generates a report as an HTML attachment. In that HTML attachment, there are two images. One is a static image that pulls down a logo using a normal HTML img tag.
The other is dynamic. It also uses the normal HTML img tag, however it calls out to a web api with some information identifying the user.
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
The Web API uses information on the user to return appropriate images to them. For some reason the dynamic image does not show up with the attachment is opened on an iPad/iPhone.
The image works just fine when the attachment is opened from a computer. I thought maybe something might be blocking images, however then I would expect the static image not to display as well. I verified that the "Load Remote Images" setting is turned on.
I am at a loss here. Is there something with iOS that prevents dynamically generated images from showing in HTML attachments?
Thanks
Ok, I can't explain why the above is not working, but I did find something that does. Instead of using the following URL
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
use
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm.jpg}/" >
The final param needs to end with ".jpg/". If the slash is not there, you will get a 404 error.
Then in the API method, you simply strip off the .jpg part of "OtherParm" to get the intended value for "OtherParm".
Related
I once saw in a tutorial video about an HTML line of code that generates random images that it fetches from the internet and puts into the webpage, I remember it being a normal img tag but inside the ref attribute contained a link that now I don't remember what it was.
Searched about this in Google but all I could find was about loading images from the directory or using the help of Javascript.
This is possible by delegating the randomness to the server that serves the images. Consider the service provided by PlaceIMG. Setting any <img/> tag to one of their URLs will let your show a "random" image. What is actually happening is that the backend gets a request for an image and serves any image it wants.
You can do this with your own, self-hosted image server and in basically any server-side language and without client-side JavaScript. However, there has to be logic somewhere to do the randomness:
<img src="https://placeimg.com/640/480/any" />
There are many sites that serve as random image source, for example https://picsum.photos.
Working example (refresh to see the effect):
<img src="https://picsum.photos/200">
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
I would like to view images on my box account natively inside a simple rails app. The goal is to run a slide-show with these images. I looked for the necessary parameters to pass each images relative url into a <img source> tag. It appears that I can only download images, or view them from within the Box application.
Is this accurate, or did I miss something within the Box API documentation?
When you create a shared link for a file, there is a download_url attribute that can be used to link directly to the file.
http://developers.box.com/docs/#files-create-a-shared-link-for-a-file
I have an HTML document type which is designed to display a form pulling data from a database application and generating a webpage that can then be printed. It's not intended to be published online, I'm just using HTML & CSS to format the page as the reporting tools within the application don't allow for decent formatting.
I'm trying to display pictures which are held on a shared drive. The code used is
<IMG SRC="X:\images\<primarykey>.jpg" height="100">
where X is the drive on which the pictures live (which users have access to), and is the unique identifier for each picture populated by the reporting tool when the html is generated.
IE can display the pictures, but Firefox does not and displays the text instead. I really need to make this work in Firefox as IE is messing up the layout of the form further down.
I've experimented with changing the IMG SRC declaration, using a relative path and forward slashes, etc. but haven't been able to get it to work.
Any advice would be great!
Thanks
Kat
Suggestions:
At mentioned by Sam, lower case the element and attributes.
Try src as: src="file:///X:/images/.jpg"
If the output is expected to be valid XHTML, you might need to ensure the is self closing, eg:<img .... />
I have some html that has an image in a table. The table displays fine in a UIWebView. I take that same html and send it in an email (using MFMailComposeViewController). The code snippet to build the html is:
html += "<tr><td><img src=\"reading.png\" align=left></td><td>"
The table is created properly, but the image just has a question mark in a blue box. (Obviously, it can't find the image, but why?)
How do I fix this?
The path "reading.png" is not found, that is the reason why you do not see the image.
There are in fact several potential solutions.
1) put the image to the web URL something like http://yourweb address.com/reading.png, this works well and will show, all the clients supports this and user just need to click to "show images" if he/she has it disabled by default in the email client.
2) second solution is to put the specific image representation to the img tag, you can do so by opening the file, reading its content and adding it as base64 data to the src of the img, there are plenty of samples for this.
3) third is to add it as attachment to the email. Again plenty of samples here and on the web how to do that.
Conversion of the sample code from ObjectiveC is simple to Monotouch.
Hope this helps.