My HTML code is not displaying the image. I have tried a lot of times.
<img style="width: 200px; height: 200px;" src="../static/aircondition.jpg" alt="Air Condition">
Output
Please check if your provided src directory is correct or not
I'm using HTML snippets such as
<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px" border="0" />
to insert scaled and offset images into blog posts in Hugo. Unfortunately I'm finding with the latest version of Hugo that images inserted this way are not rendering. If I do an image insert via Markdown, the images are inserted fine, but it appears impossible apply a style tag?
Any suggestions on how I can diagnose the issue here? I'm currently at a loss.
I would prefer to keep the HTML out of the MD as much as possible; setting anything to "unsafe" always makes me a little nervous, and I presume that was the intention when the the parameter was named "unsafe"!
I think my first port of call would be to use the figure shortcode, that supports a class name, as well as nice-to-haves like captions and titles (which may have accessiblity and SEO benefits).
{{< figure src="site.jpg" title="Cool Image" class="pull-left" >}}
If that doesn't suit, the options would be a custom shortcode, or target through pure css, you could use nth-child to alternate images to the left and right if desired.
Edit - Additional info
Create a CSS file and link it in the head, for example I have <project-root>static/styles/main.css and this in the head of my layout
<link href="/styles/main.css" rel="stylesheet" type="text/css">
Very important to note that static is not part of the url/href.
Above I assigned the figure the class of pull-left so in main.css your style would look like
.pull-left{
width:100px;
float:left;
margin: 0px 5px 5px 0px;
}
Added details from Link in Comments
Best to make a copy of theme files rather than overwriting so create
layouts -> partials -> head.html
normally copied from
themes -> actual-theme -> layouts -> partials -> head.html
and add in the normal HTML link tag. (Fun bonus fact, themes are optional if you want to create from scratch)
You can also specify files in the config file
custom_css = ["css/custom.css"]
custom_js = ["js/custom.js"]
And use this code to add to the head.html
// css
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
// javascript
{{ range .Site.Params.custom_js -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
It turns out that inline HTML was getting filtered out by Hugo. The following needed to be added to config.toml to allow the HTML to be inserted into the resulting pages.
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
This came to pass in Hugo 0.60.0 with CommonMark compliance.
Not sure if this helps, but I cleaned up your syntax a little.
<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px; border:0px;" />
I am having trouble with an HTML file that consists of only a video. When I play the HTML file locally, the video plays with no errors. When I try to access the same HTML file from another HTML page, using a picture as a link, the first scene of the video is black with no audio. The second scene works fine and then when you dive into training sections, none of those play either.
Any suggestions on what could be affecting this HTML file that includes the video to run differently if called through a link.
code I am using:
<div style="width: 700px; margin:20px; float: left; border-right: 1px solid #ccc">
<p class="title" style="margin:20px"><b>DART 10.4</b></p>
<a target="_blank" href="\MSTR10\story_html5.html">
<img src="\MSTR10\Logo.png" alt="DART 10.4" style="width:640px;height:360px;border:0;">
</a>
</div>
did you try putting in the fill exact path ?
I am trying to build an email template in which i have to show some images to different mail client (eg.. outlook, thunderbird...). Now problem is when these clients does not allow to show image at that time broken image box is displaying which i don't want to display.
I had also refer
Refered link 1: How to remove borders around broken images in webkit?
Refered link [2]: input type="image" shows unwanted border in Chrome and broken link in IE7
Refered link [3]: How to stop broken images showing
but not able to find any proper output.
Note : I can not use div tag. I must have to use table tags.
CODE What I am using :
<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
<td>
<a href="http://www.sampleurl.com">
<img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
</a>
</td>
<td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
</td>
</tr>
<!--<tr>
<td colspan="2" style="height:1px; background: #0d5497;"></td>
</tr>-->
OUTPUT what i get.
use alt here for fallback
demo
html
<img src="abc" alt="image" />
css
img {
width:200px;
height:200px;
}
Alternatively, if you dont want to show any alt text, just give a blank space.
demo here
HTML
<img src="abc" alt=" " />
I know I'm late to the party but I didn't see a simple solution that used native javascript. Here is the solution I came up with
<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">
onerror calls a function, passing an error event as an argument. Because the argument is not actually defined as 'error' we need to get it from the arguments array that all functions have. Once we have the error we can get the currentTarget, our img tag, and sent the display to none.
I think you can use on error event on img.
here is a simple solution
Please pay attention that this script uses onDomReady event. In this case you should write:
<script type="text/javascript">//<![CDATA[
$(function(){
$('img').on('error', function () {
$(this).remove();
})
});//]]>
</script>
UPDATE
Why do you load images ? You can attach this image to email and show it via CID
You could any other element instead of and IMG and set the background-image using CSS. If that image is not found, you will not get the strange looking box.
<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
element with background
</span>
Sounds like a tough call not being allowed to use ALT text
If whoever is making this decision is convinced by a bit of styling you can do that e.g.
<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">
see http://jsbin.com/IcIVubU/1/
use this code block in your mail content to keep unrendered image as hidden.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />
concept is.. use any CDN jquery reference then only jquery code will work. and I guess your src image path also should be some live url. if not then, it should be in attachment.
Please Click on "Show Remote content" to get remote urls into
thunderbird. this is security constraint of thunderbird. that's why
your images are not being loaded.
I know it is an old question but I found I had this problem too today (08 January 2020) and found a way to get around it.
I tested with the latest versions of Firefox and Chrome, I still could not find a solution for Safari.
Firefox:
For firefox you must add alt=" " note the space
Chrome:
For Chrome it must be alt="" note the empty space
The problem is that when I add the space the icon shows up on Chrome and disappears on Firefox, and vice versa when I remove it.
I added just a space because I did not want any text showing up on the image.
I did not have to add any of the following lines for it to work (I saw many solutions proposing some or all of them), but I left them in just in case
border: none;
outline: none;
border-image: none;
From there I guess it would be detecting a the browser in JavaScript and changing the alt attribut to " " or "".
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror =function(){this.parentNode.removeChild(this);
})});
DEMO
you can remove img by javascript:
arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
if(arr[i].src=="")
arr[i].parentElement.removeChild(arr[i]);
}
I have html page with full of link. but they inside the pre tag like below
<pre class="alt2" dir="ltr" style="
margin: 0px;
padding: 6px;
border: 1px inset;
width: 640px;
height: 130px;
text-align: left;
overflow: auto">
http://test.com/files/tivist.r00
http://test.com/files/tivist.r01
http://test.com/files/fdfd.rar
http://test.com/files/gfgf.rar.html
http://test.com/files/trtr.zip
</pre>
</div><br />
The page is full of links like those
Is there any way get only those links form whole page.
I am using notepad++ . If i can get regex which can just extract those links
you can use the following regex to find them all in the document.
http://[^\s]*
I guess you could edit it to or something similiar
http://[^\s"><]*
Besure you set the line by line option off. Notepad++ has a very limited and poorly documented regex engine. Try downloading editpad pro trial edition.
(?<=\<pre.+?)http:\/\/.+?($|\s)(?=.+?\<\/pre\>)
This should only get links that are within a pre tag.
Here is a screen shot from Edit Pad Pro Trial edition