HTML:Image won’t display - image

My image won’t display for no reason. I am a noob but I can’t figure it out. The image loads from the url so I know it’s not that. So I’m pretty sure it’s my problem with the coding.
<body>
<img src=https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?dl=0
Height=300Width=250>
</body>

Your URL is pointing to non-image resource. It's actually pointing to an HTML document.
In URL, change www by dl and remove ?dl=0.
This is valid image URL :
https://dl.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG
Alternatively, you can replace dl=0 to raw=1. This is also valid image URL:
https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?raw=1
Not always required but as a good practice I'll suggest using quotes for values. Also as mentioned in comments seperate attributes from each other with white space.
<img src="https://dl.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG"
height="300" width="250"/>
<!--OR-->
<img src="https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?raw=1" height="300" width"250"/>
source : Mickel's Tutorial

I hope, you must use the url of image, But you are referring the url preview pane of dropbox.
It is the actual url for image.
You also need some improvisation with your code, as below
<body>
<img src="https://uc215f04ebb05efbc98d874fefb2.previews.dropboxusercontent.com/p/thumb/AA767gGwgVfZ9rVS7PJbtIOR3eQsWN4mrXjNjVJH3JKjhI5eE7JOd-eQJwydUx1gPkpE3zkAnMSN3-1KEtFN86x-CdWnREg0mQ6hm7APBCuifux1ECDivRuLkrikn1sY_r20EmBWucKHyy-Ps5VPB8ehkUB6x0y9kSb3QzYpP8fOo7IeyR6IaCYZ66mxrJiUiUtzTAV3ddESpRV7lSRaumsSyVPc4k1RbUBS3-_JDnP8Qv6M42x2g7bZDy9vdhhIOZaO585_XQHegapCJ-8bnwLGt-VEy9nud0avi_gzMSpXxx3EXt_NYTWMfFqfstb2HFMVb7WK7jxkSRSX5eE5ck3Q0bdEPAKp1aPnClU2KqI-OgUea6ApGp4G0H4Q3l3UyOjfomtn-SndAAaUzPbaU1HK/p.png?fv_content=true&size_mode=5" height="300" width="250" />
</body>
It will work without any issue. You are not referring proper url that the actual issue.
Also, keep tag properties in quote "" if required.
Like
<img src="url" height="200" width="300" />
Thanks.

Related

Image stop being responsive as a child of a <a> element

I am trying to make the logo to redirect to the homepage, but when I put the image in an anchor its responsiveness doesn't work. I am using the "Simple Blog" template from here https://www.ampstart.com/templates
<a href="/">
<amp-img src="/images/logo/logo.svg" width="435" height="61.3" layout="fixed" class="my0 mx-auto " alt="Logo"></amp-img>
</a>
Try changing the layout type of amp-img from fixed to responsive.
I seem to recall possibly having some issues with SVG and responsive, but I could be thinking of something else. If responsive doesn't work try intrinsic.
See the tips and tricks section of the amp-img page for more info.

How to use XPATH to find an image called *logo*, or which has a class with the word *logo* in it?

I am creating a crawler which needs to download the logo from every website it crawls.
It is quite hard to detect which image is the logo, however I don't need 100% accuracy, so I am thinking of just looking for <img> tags which fulfil any of the following conditions:
A. The name of the image in the <img> tag has the word "logo" in it, for example:
<img src="logo.gif">
<img src="site-logo.jpg">
<img src="mainlogo.png">
B. The class or id in the <img> tag has the word logo in it, for example:
<img class="logo" src="something.gif">
<img id="main-logo" src="something.gif">
<img class="background logo" src="something.gif">
I've tried following the W3C XPATH documentation, but it is not very user friendly. I've also tried using what are supposed to be wildcards (according to w3schools) but they do not appear to work as expected.
Is it possible to achieve what I want using XPATH? Could you help provide some pointers or example code?
Thank you.
You could use:
/html/body//img[contains(#src, 'logo') or contains(#id, 'logo') or contains(#class, 'logo')]
which will find all img tags that are a descendant of the body tag, where the src, id or class attribute contains the text logo.

Custom image in footer (Prestashop)

I have a small question. I am using prestashop, and would like to add image in my footer. I am trying to add img tag in footer.tpl
<img src="/htdocs/themes/warehouse/img/logo_btm.png" alt="logo" />
but instead of picture i have question mark.
you use relative path
instead of relative path use full url to your image like
http://domain.com/link/to/image.jpg
You have to use smarty global var, put the image in your theme's image folder and use this syntax
<img src="{$img_dir}logo_btm.png" alt="logo" />

JPG not showing

![enter image description here][1]I've tree jpg to show. Here's the html:
<img id="carrossel1" class="imagemCarrossel" src="/images/home/fundo_carrossel1.jpg" />
<img id="carrossel2" class="imagemCarrossel" src="/images/home/fundo_carrossel2.jpg" />
<img id="carrossel3" class="imagemCarrossel" src="/images/home/fundo_carrossel3.jpg" />
The first one is rendered fine. The two other not.
The image folder have:
fundo_carrossel1.jpg
fundo_carrossel2.jpg
fundo_carrossel3.jpg
The 2nd and 3rd don't show up in Chrome of Firefox...
Maybe your CSS is modifying the elements resulting in a change of display behavior. Can you post the CSS you are using to further try to help?

Image Pathing and Absolute Paths?

I'm developing a website in ASP .NET MVC 2 using C#.
I have a partial view, Header.ascx. In there I have an image for my website, MainImage.png.
When I use one of the primary Views I've created, the image shows up fine. For instance, I hit the Index ActionResult of my News Controller. (site.com/News)
However, when I dig deeper, I seem to lose my image, even though the Partial view is being displayed from the Master page. i.e., if I try going to site.com/News/Article/1
Are there any suggestions for keeping my image fully intact, such as a way to do absolute pathing?
The code I currently have in my partial view is here:
<div align="center"><img src="../Content/images/MainImage.png" style="border:none" /></div>
I've tried changing the src to ~/Content/images/MainImage.png but that breaks it all over the site.
Use the Url.Content helper method.
<img src="<%: Url.Content("~/content/images/imagename.png") %>" />
Same applies for when you want to include javascript files or css
<link rel="stylesheet" href="<%= Url.Content("~/content/site.css") %>" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/content/scripts.js") %>"></script>
Whenever possible, make the path (href or src) to resource files, like images, CSS and JS relative to the web server root. That is, your URLs should begin with a slash:
<img src="/images/imagename.png" />
That format retains the current server address (which may be an IP address, an internal network address or any of a number of public web addresses), protocol and port, and doesn't depend on the apparent path of the page the user is looking at (which can change, depending on whether the user is accessing the page by its canonical location or by a URL rewrite).

Resources