I am trying to display images inline into mails with Django but it does not work.
Here is the line that I use to display the images inline :
<img src='http://localhost:8000/static/myproject/media/mypic.jpg' width="125" height="120" style="display: block; border: 0px;" />
I got nothing actually....
Could you help me please ?
Thank you very much !
Related
I'm building a custom WordPress theme and want to make it compatible with Polylang but I get issue when testing the language switcher with flags. My Theme uses bootstrap and the menu uses the Bootstrap NavWalker Menu
Here is what I get instead of the image flag:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGzSURBVHjaYiyeepkBBv79+Zfnx/f379+fP38CyT9//jAyMiq5GP77wvDnJ8MfoAIGBoAAYgGqC7STApL///3/9++/pCTv////Qdz/QO4/IMna0vf/z+9/v379//37bUUTQACBNDD8Z/j87fffvyAVX79+/Q8GQDbQeKA9fM+e/Pv18/+vnwzCIkBLAAKQOAY5AIAwCEv4/4PddNUm3ji0QJyxW3rgzE0iLfqDGr2oYuu0l54AYvnz5x9Q6d+/QPQfyAQqAin9B3EOyG1A1UDj//36zfjr1y8GBoAAFI9BDgAwCMIw+P8Ho3GDO6XQ0l4MN8b2kUwYaLszqgKM/KHcDXwBxAJUD3TJ779A8h9Q5D8SAHoARP36+Rfo41+/mcA2AAQQy49ff0Cu//MPpAeI/0FdA1QNYYNVA/3wmwEYVgwMAAHE8uPHH5BqoD1//gJJLADoJKDS378Z//wFhhJAALF8A3rizz8uTmYg788fJkj4QOKREQyYxSWBhjEC/fcXZANAALF8+/anbcHlHz9+ffvx58uPX9KckkCn/gby/wLd8uvHjx96k+cD1UGiGQgAAgwA7q17ZpsMdUQAAAAASUVORK5CYII=" alt="Français" width="16" height="11" style="width: 16px; height: 11px;" /><span style="margin-left:0.3em;">Français</span>
Can someone please help me solve this?
This is a base64 encoded image that you receive. And it should be displayed correctly on frontend.
See this https://codepen.io/hug0-drelon/pen/eYWaMVX with <img src="data:image/png;base64, <!--encoded image--> " alt="Français" width="16" height="11" style="width: 16px; height: 11px;" /><span style="margin-left:0.3em;">Français</span> for instance.
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/
On my personal website I am trying to put some small buttons that link to my other online profiles (linkedIn, StackOverflow etc.).
I have added html to a Text widget in the sidebar of my home page. And the buttons work as expected.
Where I am having trouble though is getting these buttons to all be on the same line - and I can't for the life of me figure out why they are on different lines.
The HTML code i use is:
<!-- LinkedIn Piece -->
<a href="https://nz.linkedin.com/pub/samuel-passmore/59/403/70a" style="text-decoration:none">
<img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="30" height="22.5" border="0" style = "border-radius: 0em"></a>
<!-- StackOverflow Piece -->
<a href="http://stackoverflow.com/users/1544746/sampassmore" style="text-decoration:none;width: 30px">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" width="30" height="22.5"></a>
And you can see the current result on my webpage
www.sampassmore.com
I think I have narrowed the issue down to the margins on the img tags, but setting them to 0px did not seem to do anything.
Does anyone have any other suggestions?
Add a class to the 3 widgets then add a display: inline-block property. You need that property to change the size of a tags and to display them inline properly. For example:
a.social-icons {
display: inline-block
}
just wondering if there is a way to reduce the amount of code needed when displaying a lot of images in HTML?
I am wanting to display around 2-300 images in a gallery, and at the moment the HTML will look like this:
<div id="scroller>
<img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
<img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>
...but down to image "decking-250.jpg".
Is there a more efficiant way to display the images so that I don't have 250+ lines of "img src" HTML?
The only part of the filename that changes is the "-1", "-2", "-3" etc etc. The rest, including the Alt tag can remain empty.
I am building this site in ASP.Net MVC3 Razor using the ASP.net online tutorials as a guide if that helps any solution come to mind, of if it simply has to be done that way then that is also fine - I just wondered if there was another approach I should consider to learn?
Many thanks in advance.
This is the way HTML works. You can't reduce that, as you need one img tag for each picture. You may create that code dynamically via PHP, JS, …. But in the end you'll get a long list of img tags, maybe individually wrapped by other tags (for example in a list).
I agree with Feela, and though it may appear verbose, your code is about as bullet-proof as it gets. Yet if something like JS is something you can use (or are using already), there are options. This isn't tested, but you could set up a for-loop statement in Jquery/Javascript that could condense the code. For example:
for (i=1; i < 250; i++) {
$('#scroller').append('<img src="/Content/images/decking/decking-' + i.toString() + '.jpg" width="100" alt="" />');
}
I'm no ASP coder, but perhaps it provides something functionally similar.
Before a user has chosen to view images in an HTML email there is a grey border around them. Is there any way to hide or remove this border? I have tried the following with no success:
<img width="9" height="28" src="button-right.gif" border="0" style="border: none;" />
This affects all or most email clients e.g. Outlook 2007, Entourage, Gmail, iOS 5.
I'm starting to think there's no way to solve this?
I build HTML emails as part of my job. This is how i would normally lay out an image:
<img style="display:block;" src="Images/main-image.jpg" height="304" width="593" title="title-text" alt="alt-text" border="0" />
I would remove: style="border: none;"
Otherwise my suggestion would be that the image has a grey border. If you want to send me the entire email and ill have a look send me a link to download it.
Use css. set the image's style toborder: 0 and outline:0