Ok, so I have an HTML email with several inline images (charts and such). The images are embedded using CID. The email works perfectly fine on all desktop platforms. My issue is that the images are no longer inline when you try to open the email on iPhone (IOS mail app or IOS Outlook).
This is what they look like on IOS mail:
And this is what happens when you tap one of those boxes:
(contents of the image are irrelevant)
So, they load fine if you tap them individually, but I really need them to appear inline. Any idea whats going on? I thought maybe the images were too large, but one of the images is only 12kb and it still doesn't appear. In total the email is only about 850kb, which really shouldn't be too big either.
A few things to note:
It is definitely sending properly as an HTML email, as all of the CSS in the titles and the HTML tables (not shown) are working perfectly.
There is no "Download all images" link at the bottom of the email, as many of the suggestions I have found online seem to say.
I have "Download remote images" enabled in my settings.
All of the images are .png
Any ideas are appreciated.
I found the issue. For whatever reason this happens when I am making an absolute reference i.e. (C:\ReportEmail\Data\Logo.png) to the file path in my code. If I put the images in the same folder as the script and make a relative reference to the working directory i.e.(.\Logo.png) it works fine. I have no idea why this is the case, as the two types of references should be pretty much identical in usage. Oh well.
Related
I maintain a website that uses WordPress. From time-to-time, one of my associates opens a page in the browser, highlights some text and images, and copy/pastes it into Microsoft Word, in order to provide summaries of content to one of our higher-ups.
Ordinarily, this would be an uneventful task. However, this process is now not working. When we highlight, then copy/paste content from a page, the text will transfer over to Word, but the images will not. We simply see an empty rectangle where the images should be. A screenshot, demonstrating that web page content that is copied, displays as nothing more than an empty rectangle when pasted.
This behavior is consistent across IE, Chrome, Opera, and Firefox. This problem occurs whether we use Microsoft Word or OpenOffice Writer. No updates were made to Word or our browsers during this time.
Of course, we want the images to display in Word, rather than empty rectangles. What can we do to make the images display in Word?
Insert image from your local system if problem persist, then its your Word issue. If local images are showing perfectly then just save a copy of image from online resource to your local system and add images from there. may be its just because of word is taking online reference for image and could not connect to internet to resolve them and showing you broken image. or the image you are adding is not supported by the older version of word such as .svg graphics. make sure you are adding images with .jpeg/jpg , .png, .gif file extension.
I have an image gallery composed of individual albums. All files and images are loaded to the site via single function which just loops through the files passed from the form via a standard html , so every file is loaded in the same way but just put in an appropriate folder.
The gallery was working fine until last night when 4 images loaded to one album would not display. This was traced to file permissions where the server suddenly assigned 600 rather than 644 (no permission assignments are made in the load function or anywhere else). Correcting the permissions resulted in the images displaying. However it was then found that a number of images in other albums were not displaying, whereas they had before. There were no issues with permissions.
Gallery page from Edge Chromium
So in the album page, the first album has a broken link and the second and third are OK, the forth is broken. The display is generated from a loop going through a table of the album metadata and picking up an image at random to display for each album. For the first two albums on the page the html from looking at the page source is,
<div >
<a href="media.php?mode=grid&album=18&activity_id=17">
<img src="media/A18-uke.JPG" width="210px" height="140px">
</a>
Altered Images - Cheryll Yeowell
</div>
<div >
<a href="media.php?mode=grid&album=17&activity_id=17">
<img src="media/A17-IMG_0322_edited-1a.jpg" width="210px" height="140px">
</a>
Chihuly at Kew - Liz Strange
</div>
If I look at the files in the media folder, both the image files are in there and from Filezilla I can view them, so the images are valid. The Filezilla folder listing shows both files the same as in the html above.
Filezilla listing of image files
The file names are the same as in the html above and both have permissions of 644; one is displaying and one not.
Out of interest I then looked at the page in Firefox and Chrome. None of the images displayed in those browsers.
Everything was working fine 3 days ago. No changes to scripts. Today, in Edge, some albums are fine, some only partially work, some not at all. Move to Chrome and Firefox and nothing now works. It's not involved html and, since it is all done in loops, every image is subject to the same code. One user has said that if there are some images showing and then the page is refreshed, all the image links display as broken, but I have not been able to replicate that.
I would welcome another set of eyes to either tell me what the silly mistake is or some inspiration as to what might be causing this apparent illogical behaviour.
Many thanks.
This is totally crazy - I am on my laptop and went to try the gallery on Edge, Firefox and Chrome and it all works perfectly. I haven't had any updates on close down over the past two days on my laptop or desktop and I've just checked the update logs and that doesn't show any. Since originally posting this I've had some more reports of problems from users. How can a facility be so apparently random in its working?
Just to make it more bizarre, today everything is back to normal. I haven't touched the code and all is back to how it should be. What would cause a set of image links to be broken (no other links on the site were broken to my knowledge) in a random fashion for 24 hours and then revert to being OK?
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 cannot get the image to display... in an HTML e-mail. It does display in the browser. I have looked over similar posts and think I am missing something obvious. Trees/forest. Any ideas? TIA.
code:
<div style="margin-left:10px;background-image:url(http://info.enterprisedb.com/rs/enterprisedb/images/banner_img.jpg);background-repeat:repeat-x;width: 750px; height: 210px;">
testing2
</div>
I should add that this does display in some browsers, but when coming through in an e-mail it only works in some cases - Gmail is oK, Outlook is not.
For some reason it doesn't work in an certain e-mail programs, though its pretty basic HTML. I've been testing with sharklasers which also does not display the image. If I put it in the e-mail as a standard img link (not in the div) it displays fine in these e-mail programs.
By default, OWA(Outlook Web App) will block some external content in HTML messages, such as pictures or sounds linked within the message. These links are hidden references (not the underlined kind that you click to activate) in the HTML source code to an external location on the Internet, such as a website. They are triggered when the message is opened or previewed, which prompts a download of the external content.
Reference : link
After looking here : Background images not working in Outlook 2007 and later , it appears that the only way to make background-image work in Outlook is to use it on the <body> tag. That may not be what you want but we can't do much about that, that's how Outlook is made :/
I have a question about Font Awesome. I'm working on a school project, using the codes from codrops Split Layout. Until this point, I have replaced the code's broken font types with "Font Awesome". On my local computer, I've managed to make it work. Here are pictures of how it looks in 2 frames.
This first picture is without hoving over anything. All objects are fine and visible:
In my second picture, it shows how it looks when I hover on any button:
These pictures are taken on my computer. Until I uploaded them, it was all good. Whenever I have uploaded my files to web, I've seen these two pictures. One with no hover ( http://tinypic.com/m/i6ijix/4 ) and with hover on ( http://tinypic.com/m/i6ijj6/4 ).
On second set of pictures there are some shapes that appeared after uploading the files to web host and when I hover on them, the buttons misplace but not on the first two pictures. Can anyone explain why is this happening?
I think the problem is based within the files, try to reupload them. What's your html markup?
I had this problem with Glyphs over 10 times, file uploader was corrupting them and I had to use other FTP client.