Img src relative path taking file protocol - html

I am having problem with an email template. I am setting the URL without any scheme, so kept it relative. In html source code it's forming as below. But when I checked the browser it's trying to get the image with file
protocol. So it's not loading the image at all. I can add the scheme while forming the URL at back end but I want to avoid this. Not sure if it's related to doc type, i am using HTML 5. With http url image is accessible.
!DOCTYPE
html
HTML Code:
<img src="//domain.test.com/XXX/XXX/YYY.jsp?type=Interleaved2Of5&msg=911000016096553&fmt=image/jpeg&height=33&res=48&mw=.7&gray=true&wf=2.5&hrp=bottom&hrsize=20pt&hrfont=verdana" width="146" height="62" style="display: block; margin:0; padding: 0"/>
On Browser:
file://domain.test.com/XXX/XXX/YYY.jsp??type=Inte…ght=33&res=48&mw=.7&gray=true&wf=2.5&hr.....

Related

Web page doesn't render svg

I have a simple html page :
#my_svg{
width: 75px;
height: auto
}
<a href="#">
<div id="my_svg">
<img src="https://svgshare.com/i/MHB.svg" alt="English flag">
</div>
</a>
All I see is English flag so it seems like my svg is not loading. I'm sure about the path because I have the image as png on the same folder and it's working well. Just changing the extension.
The weird part is that I don't have any 404 error in my console. It's working when I add it throught the link https://svgshare.com/i/MHB.svg but when I use the local file it doesn't work. On my side I don't have any webserver and don't want
So your problem is its not working on the local file right? I think it will work if you use <img src="./flag.svg" alt="English Flag'>. That should work, sometimes not adding "./" on the src attribute will have issues because the browser might think it is a web link, not a path link.

My css background-image doesn't show

I have an issue that all beginners in CSS seems to have, my background-image doesn't show.
When I try to put background-color it works, and with image nothing shows-up.
I have put my image in the same folder than my files css and html.
I want to set the image as the background of my <body>.
I use the framework meteor.
Here is the code HTML:
<body>
<div class="Units" id="UnitsSelector">
{{>units}}
</div>
<h1>Test </h1>
</body>
Here is a part of the CSS file:
body {
display: block;
width: 900px;
margin: auto;
color: black;
background-image:url('space.jpg');
}
Also when I use the inspect tool on my browser and I try to open my url I have this error :
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/space.jpg."
The best approach I see here, is similar to these question:
How to serve static content (images, fonts etc.) using iron router
Although you haven't stated that you're using iron router. The answer will be the same.
Instead of doing all this, you can just put the files under your public directory. If you add the file:
app/public/images/space.jpg
You can access it from your templates like:
<img src="/images/space.jpg">
No routes are needed to make that work.
Beware of overlooking the lead slash.
<img src="images/space.jpg">
The above example will work from your top level routes.
Open devtools in Chrome
Click to "console"
You can see error space.jpg not found
See link on error to your image
Search difference between link in error and real place your image (solution 1)
If all good - play with width/heigh/background-position (solution 2)

Email Image not Showing (Gmail)

I've composed an email in HTML that has an image in it.
The image "src" attribute has a URL pointing to a controller action endpoint on my server (ASP.Net) which returns a FileContentResult.
An example of the img tag looks like this:
<img src="https://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
The email displays as expected in Outlook.
If I take the source from Outlook and just view it in Chrome desktop, it still works fine.
If I visit the img URL in Chrome the image is downloaded.
However, if I view the email in Gmail the image does not display. Why might this be the case?
I get a single error in the console looking something like this:
ci6.googleusercontent.com/proxy/<SNIP>https://www.mywebsite.com/controller/action?argument=value GET https://ci6.googleusercontent.com/proxy/<SNIP> 404 ()
Hi you can use this it's work for me
Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
Including width and height attributes
Including style="display:block" attribute
Including both alt and title attributes
Just add http:// in image src
<img src="http://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
First You need to add that image on your deployed project folder and then you need to specify the path of your Image :
<img src="http://www.mywebsite.com/Images/YourImage.png" />
Cheers !!

HTML: an explicit given url doesn´t work

I have two image descriptions in HTML on my local PC:
<IMG src="url('myimage.png')"></IMG> <!-- this I call "explicit" -->
<IMG src='myimage.png'></IMG> <BR>
Neither Mozilla, nor IE do show the first image. Naturally, I tried to interchange apostrophes or omit apostrophes and so on...
Why don't browsers seem to see an image described by the 'url' keyword?
You can only specify an image using a relative or an absolute URL. The url keyword is used in CSS to express an image location.
Refer to http://www.w3schools.com/tags/att_img_src.asp for more info on the img src attribute.
Some working examples:
Relative url, can only be used if the html file in on the same dir:
<IMG src="myimage.png"></IMG>
Relative url #2, can only be used if myimage.png is on dir images inside the same dir as the html file :
<IMG src="images/myimage.png"></IMG>
Absolute url - can be used from anywhere
<IMG src="http://something.com/images/myimage.png"></IMG>
The same as the above, without including the website, must be used inside domain something.com
<IMG src="/images/myimage.png"></IMG>

Need to insert image into auto-response email using HTML and block it from displaying href url for the image, using mail server on HostGator

I am trying to setup an auto-response email for our business that will display our business logo image. Our mail server is hosted on HostGator and I'm using the cPanel auto-responder setup to create this message. I am using html using img tag to insert the image, which is loading fine, however the problem I'm running into is that below the image the email prints out the url of the image.
I am wanting to prevent the url from showing up. I assume this is an issue with HTML/CSS in the HostGator side of things but don't know where to find it to change it, hoping there is an easier inline CSS formatting that can be done to hide the href url?
The code I am utilizing currently:
<div>
<img src="http://www.centralmophysicians.com/wp-content/uploads/2014/06/LogowithBorder2012color1.jpg" alt="Central Missouri Physicians for Women" style="width:179px;height:228px" />
</div>
Thanks for the help!!
The alternative would be to use the CSS background or background-image attribute as you can see below.
.image {
background-image: url("http://www.centralmophysicians.com/wp-content/uploads/2014/06/LogowithBorder2012color1.jpg");
width: 179px;
height: 228px;
}
<div>
<img class="image" alt="Central Missouri Physicians for Women"/>
</div>