Generated HTML word document not displaying image correctly - html

I'm trying to add an image to a generated html word document that is embedded in a classic ASP page. The code looks something like this:
<%
Response.ContentType = "application/msword"
%>
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word">
...
<v:shape id="_x0000_s1030" type="#_x0000_t75" style='position:absolute;
left:0;text-align:left;margin-left:0;margin-top:17.95pt;width:7in;height:116.85pt;
z-index:2;mso-position-horizontal:center;mso-position-horizontal-relative:page;
mso-position-vertical-relative:page'>
<v:imagedata src="http://xxx/image001.gif" o:title="image001"/>
<w:wrap anchorx="page" anchory="page"/>
<w:anchorlock/>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:0;left:0px;margin-left:0px;margin-top:24px;width:672px;
height:156px'><img width=672 height=156
src="http://xxx/image001.gif" v:shapes="_x0000_s1030"></span><![endif]>
The image URL is correct and can be viewed through a browser, however when the word document opens, the image has a red x, with the error message:
The image cannot be displayed. Your
computer may not have enough memory to
open the image, or the image may be
corrupted. Restart your computer, and
then open the file again. If the red x
still appears, you may have to delete
the image and then insert it again.
If i copy the html code and try to open the word document on my local machine, it displays the image correctly. It just doesn't work when retrieving the document from the server. This happens for any images I try to add. Is there another way to add images to html-generated word documents that can be output from an asp page?
Thanks.
Update:
Something that I've noticed is that when copying the word doc code from the asp page, pasting it into a file and renaming it as a word doc, I get this prompt when opening it:
Some of the files in this Web page aren't in the expected location. Do you want to download them anyway? If you're sure the Web Page is from a trusted source, click Yes.
If I click Yes, the image displays fine, if I click No, I get the same error as I described above. I'm thinking that because the word doc is coming from an ASP page, it is defaulting the security setting to not display external items. I've tried adding the site URL (it is a local intranet site) to my trusted sites and as a trusted location in word, but still no luck.

You could try removing the o:title tag. I've found that if that tag is there word tries to embed the image, but will only do so if it is in the proper location. By removing the o:title tag, word just treats it as a link.

Go into Options, Web Options (which might be under Advanced), uncheck "Rely on VML for displaying graphics in browsers"

Is all that code generated by Word 2007, or are you adding code by hand? It's interesting that the img tag doesn't have a slash to close it.

I know its a silly mistake, but did you make sure to put the image in the right place so that it can be accessed by the web page? If you just type in the http://xxx/image001.gif url into your browser, does the image appear? If not, I would say thats your problem.

Make sure the image's URL (location) is correct and add a slash.
If it still doesn't work, check if any other images from the same directory can display.
If they do then re-upload the image and try again.
If other images don't display and if you're sure that the URL is correct, then try editing the read permissions on the image directory and the images. I can't imagine that it could be caused by permissions though.
Unless there's a very specific reason to generate the HTML in MS Word, I'd advise you not to do it. Even for somebody who never saw HTML or CSS before, they're both very simple and tidy to learn and can produce much better results than MS Word.

Is Word 2007 allowed to access the internet? Maybe there's a firewall rule blocking it?

Replace the following line
"<v:imagedata src="............" o:title="image001"/>"
with simple a single line of code
"<img src="............"/>"
I am sure you will get the result.
I have checked it.

Related

Do I need to update CSS to upload new images?

I want to start by saying that I did not build said website. I was given FTP access to the site and can download it's entirety.
What we are interested in is replacing the images as they are rather outdated.
If I replace the images (naming them as the ones that exist as of right now), they update just fine.
But adding more does not. Lets say that files are numbered 1-6. If I replace those with the same name, they change. If I add 7.jpg, for example, it does not show in the gallery.
Do I need to update the CSS code or upload it again?
I can provide the code in turn.
Without further details it's hard to tell what the problem is, but it looks like either someone hard-coded CSS or hardcoded HTML. But I would really need to see the code.
Please try to copy/paste at least the code for file that should render the images.
Your gallery should contain new images' name.
if you upload 7.jpg, this one is not in your gallery I guess.
I think it will not matter if you update the CSS.
A priori, to clear any doubt if the images are in cache, I suggest you refresh the page by typing ctrl + R or open a tab in incognito mode.

Github pages not showing images inside my div

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.

disable downloading of image from a html page

Suppose there is a html page containing some images.
we want to disable the downloading of the images from user side.
Is that possible?
Should I need to use any javascript or add some attributes in <img> tag?
My current code is
<td><img src="images/handmade (1).jpg" class="img-responsive" alt="" /></td>
</tr>
</table>
Is there any technique to prevent image from downloading?
No, it cannot be done. Explanation here: https://graphicdesign.stackexchange.com/a/39464/24086
For all intents and purposes, this is downright impossible.
You can disable right click, but people can still view the source code of your page (by adding view-source: to the URL in Chrome, or just using a browser menu) and find the URL.
You can use a CSS background-image instead of HTML , but people can still use their browser's inspector (F12 for most browsers) and find that element's CSS properties.
You can engineer some crazy thing that you think will work, but at the end of the day, the user has to download the image in some way to see it. If the user is completely unable to download the image, he/she won't even be able to see it in the first place! No matter what you do, nothing will prevent a simple glance at a network traffic monitor or the "Network" tab of your favorite browser's developer tools.
Depends what you mean by downloading, really.
The user has to be able to download the image (i.e. retrieve the image onto their computer) in order to display the image in their browser. I suspect what you mean is that you want to stop them saving that specific image onto their computer. Any attempt to try and stop them doing this is pretty pointless, as they can always take a screenshot, or just access the image directly using the URL.
I've seen various attempts using javascript to try and stop users from saving images, but they are all easily worked around.
Cut up the image server-side and store them that way, then assemble them as one image in javascript client-side. The user could download each segment via URL and assemble them manually, but that is much more work than most users are willing to do.

Page shows code not rendering

I know this is simple question, but i am fighting with it for few hrs, so its better to ask in forum to get help quickly. I have added the following simple html snippet in a TextEdit program and saved the file as webpage(.html). When I run this file in any browser, like safari, chrome or firefox, it shows the same code there instead of rendering this as web page.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Could someone help me to show this as real web page rather than source code showing?
If you have access to the server scripts creating the page, then check if somewhere the http headers are being changed by that code. The browser needs to receive a header like that
Content-Type: text/html
[example in PHP: header(Content-Type: text/html);]
in order to render html properly. If this header is changed, then the browser won't be able to interpret it as html.
It is likely that TextEdit has formatted your text, since by saving it as a Web Document it thinks that you have typed up the web page how you want it displayed, with all formatting, instead of raw HTML code. Try to save the document as raw text, then change the extension manually from whatever it is (probably .txt) to .html. For a more permanent solution, it is advisable to use a non-formatting text editor when coding.
EDIT: This is what Apple have to say: http://support.apple.com/kb/ta20406
The solution to your problem is simple.
Just open TextEdit and go to preferences.
Just tick the box which says"display html files as html code instead of formatted text".
Your problem will be solved. :)
You have saved the text you pasted in as HTML content, in the HTML editor. Instead, you should try to paste the text in the code view, not the editor view.
In case any of you have already created the file and not sure how to proceed, open the file in TextEdit. Go to Format -> Make plan text. Then save and close the file. Then open the file location in finder and rename to .html and this will convert the file appropriately.

.html file without any HTML tags

Beginner question:
Every .html page we create requires tags to start and end html file an recognize it as a html file.
But even when I don't give any HTML tags and simply write a text in .html file, the file gets opened in the browser with the text I have written in the .html file without using any of the HTML tags.
How is the text getting displayed in the browser without using any HTML tags?
Does the browser automatically add HTML tags behind the scenes??
When I viewed the page source in that also it shows simply the text not the HTML tags...
This is a very simple question but driving me nuts please help me
Yes the browser automatically add HTML tags behind the scenes:
look:
My HTML file:
In my browser (F12 in chrome to get this OR CTRL+U to get the source code):
Yes, if you don't supply any tags, the browser will add some default tags. It knows it's HTML because the server sends the header
Content-type: text/html
If you open the Developer Tools (usually with F12) you can view the synthesized DOM and see the tags that the browser added automatically.
Browsers aren't just software which renders perfect (X)HTML.
They do quite different and often more complicated jobs like:
Fixing malformed HTML
Adding missing tags
If you want to know which HTML structure gets rendered by the browser, take a look at the developer console.
Additionally, the file extensions .html or .htm do not matter. The MIME type which gets sent by the server determines the render mode.
This is why you could create an URI route http://example.com/test.gif which renders as a normal HTML page.
Only if the server (e.g. when accessing from your hard drive) does not provide a MIME type, the browser may try its Content sniffing algorithms.
Because of the .html extension the browser automatically knows that it is HTML, meaning you don't need the HTML tags (however, this is bad practice)...
As for the text being displayed, that is because the text does not need to be inside any special tags in order for it to be shown.
I hope this helps you a bit, let me know if you need further help!
I do not know whether the question is still current, but one solution is to open the HTML document in MS Word. In this case you see only the formatted content.