The same thing has been use for another image that uses HTML, and it works fine, exept for this one : https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png
And when I put the URL the same way I did for my other image and the same elements used, Yet it doesn't work.
Can someone help me fix it ?
<div><img width="50" height="50" src="https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png?width=1260&height=117"></div>
I've tried many alternatives to the URL, but they all don't work, I even tried changing the name.
The img tag has two required attributes: src and alt.
So you have to change your href attribute to src.
<div><img width="50" height="50" src="https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png?width=1260&height=117"></div>
For more detail, take a look at; https://www.w3schools.com/tags/tag_img.asp
It loads this way, there are no issues in your html.
As the font color is white, you maybe need to give the div a black
background like this:
<div style="background: black">
<img width="50%" height="50%" src="https://media.discordapp.net/attachments/604447563185127426/665665552324362260/BCS_Bottom_Bar.png">
</div>
I changed your width and height attributes to 50 percent.
Demo:
https://jsfiddle.net/ohc50tx6/
Related
I've tried both the longdesc and the alt tag to make it so a description of the image appears when hovering it but none of them seem to work.
Any idea what to do since none of the tags seem to work.
My code currently looks like this:
<div align="center">
<img src="placeholder.jpg" width="900" height="300" alt="Placeholder">
</div>
The alt attribute stands for alternative text when the image doesn't load for any reason. The correct attribute you are looking for is title.
<img src="placeholder.jpg" width="900" height="300" title="Placeholder">
I have met a strange problem. I am writing my blog post in Markdown. Occasionally, I need to include images and control and image size using HTML. I just include some HTML tags in Markdown. My code is like the following:
<p align="center">
<img src="https://blog-resource-1257868508.cos.ap-hongkong.myqcloud.com/20181225231628.png" width="200">
</p>
I found that setting the width attribute works as expected, but if I only set up the height attribute, the height attribute is ignored by the browser (tested both on chrome and safari).
I.E., the following HTML code does not work in setting up image height:
<p align="center">
<img src="https://blog-resource-1257868508.cos.ap-hongkong.myqcloud.com/20181225231430.png" height="200">
</p>
An example page is shown here. The first image is using height attribute only (height="200"), and the other images are using only width attribute (widht="200"). You can check the source code of the page to verify that.
BTW, I am using Hugo to generate the blog site for me. I do not if it is relevant.
Try wrapping your height in a style tag like this
<img src=“image.png” style=“height: 100px”>
You could also do something like this...
<p align="center">
<div class=imgContainer”>
<img src="https://blog-resource-1257868508.cos.ap-hongkong.myqcloud.com/20181225231628.png" width="200">
</div>
</p>
And
.imgContainer {
Height: 100px;
Width: 200px;
}
An image as a link:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100"
height="100">
</a>
The above code behaves differently in IE and Chrome.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image
In IE, when I tried to dragout the image it used to create a shortcut to
the href specified in the anchor tag. and also it used the alt attribute
to set the name of the short cut.
But it Chrome, It uses the image src attribute to download the image.
Is there any workaround to make it similar to IE in chrome as well?
An image as a link:
<a draggable="true" href="https://www.w3schools.com"> <img draggable="false" border="0" width="100" height="100" style='background: url(/tags/logo_w3s.gif);'></img>
</a>
I tried the above solution in Chrome, It helps in creating the shortcut
pointing to the href specified in the anchor tag. but it doesn't uses
the alt of the image.
If i tried to make
<a...>W3Schools<img...></a>
It helped but the string W3Schools is displayed as part of the page.
having trouble with a CSS problem, but I can't figure it out. none of my images are displaying, yet they have working urls and the HTML is correct.
there's no image styling, and the image class's only styling is: .postimg { width: 100%; }
problem here:
http://jsfiddle.net/4pmUu/5/
this probably has a really simple solution, but i can't figure out what's wrong..
You do not have the correct image tag. To show an image in HTML use the <img> tag.
see http://jsfiddle.net/4pmUu/7/
As far as I can tell, you just have the image tag wrong. <i> is italic text; you want <img> instead. That is, <img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" />
If you substitute <i ...></i> and use it (below) it should work.
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"/>
You are using the image tag as:
<i src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"> this is where the actual error it.
The correct way to do is to write <img... use this:
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" alt="photo" />
Also please note that, using alt="" is necessary in images, as if the image is not loaded because of some issue, the user will be shown a text about that image.
I have 3 different sizes for the same image.
Can I achieve something like the following:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg?small'></img>
<img src='/path/to/image.jpg?large'></img>
I have tried the above but it instead shows image.jpg
The browser doesn't understand what you're trying to do. Why not append the size to the end of the image, like so:
<img src='/path/to/image.jpg></img>
<img src='/path/to/image.jpg_small></img>
<img src='/path/to/image.jpg_large></img>
I would suggest to keep the same image and add some css style to each one, instead of calling the same image 3 times from it path something like:
html code
<div>
<img src="/path/image.jpg" width="100" height="100">
</div>
<div id="scale-up" style="height: 230px">
<img src="/path/image.jpg">
</div>
<div id="scale-down" style="height: 57px">
<img src="/path/image.jpg">
css code
img {
vertical-align: middle;
height: 100%;
}
#scale-up {
height: 230px;
}
#scale-down {
height: 57px;
}
If you want filenames to look like (on server):
fd11f91bb8361030bdc09d8b8ed4f88e?w=200&h=76&f=png
You need to url encode them when requesting to server. For example using http://meyerweb.com/eric/tools/dencoder/
So url encoded file will look like:
fd11f91bb8361030bdc09d8b8ed4f88e%3Fw%3D200%26h%3D76%26f%3Dpng
So in your case it should be:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg%3Fsmall'></img>
<img src='/path/to/image.jpg%3Flarge'></img>
Like #Leo mentioned, using html-tags (or css) is much easier here than a url-based approach. (which would require server logic)
The html-tag resizing would look like:
<img src="/path/to/image.jpg" width="100" height="100">
You mention that you dislike how that might increase the bandwidth usage. This shouldn't be a problem as long as your website uses caching on the images. (it will only download the image once then, and just resize the same image locally for the different tags)
I would suggest
<img src="/path/to/image.jpg"></img>
<img src="/path/to/image_small.jpg"></img>
<img src="/path/to/image_large.jpg"></img>
to keep the file extension.