I am trying to embed an image to html when sending email.
I have the image (logo.png) and html (welcome.html.eex) located under priv
Sadly, I receive the email without the image in it.
here is the email I receive:
when I inspect element I get: (no src=" ... ")
<img width="212px" height="26px" align="bottom">
though - when I preview locally my html (from my-html.html - see in my code ) seems ok:
here is my welcome.html.eex
<p>
<span>
<strong>Bem-Vindo hii</strong> à
<img
src="<%= ~s(data:image/png;base64,) <> Base.encode64(File.read! (Path.join("#{:code.priv_dir(:my_app)}", "logo.png"))) %>"
width="212px" height="26px" align="bottom"/>
</span>
</p>
here is my code, sending email adding the html using bamboo:
import Bamboo.Email
def send_verify_email() do
File.write "my-html.html", get_html() # writing the html localy - to verify..
new_email()
|> to("foo#bar.com")
|> from(#from_addr)
|> subject("Welcome")
|> html_body(get_html())
|> Mailer.deliver_later
end
end
def get_html() do
EEx.eval_file(Path.join("#{:code.priv_dir(:my_app)}", "welcome.html.eex"), [tok: "123"])
end
what am I doing wrong?
how can I attach a base 64 image on email html?
edit
I also tried adding image by path
welcome.html.eex
<img src="<%= Path.join("#{:code.priv_dir(:my_app)}", "logo.png") %>"
but still get same results - locally html seems ok, but on email html is:
when I inspect I get
<img src="https://ci4.googleusercontent.com/proxy/4eMU8Te6MM215JLJ5gm3Z9jnC4hytOkDeF4ldFGb1pC17GDhtZphCtH623p1ZwNYZxBfAatQtlX_V9MKALbOE0jIzxVXJ43tZLeA5hUT7tjs7FEz3_PVoUQ5Ih7w0rvuRtLy7pVqR9UoU5TBF5E=s0-d-e1-ft#http:///home/dina/Documents/WK/my_umbrela_app/_build/dev/lib/my_app/priv/logo.png" width="212px" height="26px" align="bottom" class="CToWUd">
so I do have src="" but it seems broken.. :(
Related
so i want to make all my img links into a simple word/code in html and css
Example:
//Not like this
<img src="https://img1.com">
<img src="https://img2.com">
<img src="https://img3.com">
//I want to do something a little bit more like this instead
value01 = https://img1.com
value02 = https://img2.com
value03 = https://img3.com
<img src="value01">
<img src="value02">
<img src="value03">
I don't know what to do I am new to HTML and CSS
I think you can't do this in html because
The <img> tag is used to embed an image in an HTML page, maybe you can do this in python, instead, you can do this:
<b>
<img src="value1.jpg" alt="Value1" >
</b>
Source :
img tag html
there are two ways I can think of.
::THIS FIRST OPTION ONLY WORKS IF YOU SAVE THE PAGE IN (.PHP) EXTENSION
1° Method => You can create a php file apart, store the links of images in variables like this.
< ? php
$img = 'https : // upload . wikimedia . org /wikipedia/commons/thumb/c/c3/Python-logo-notext . svg/1200px-Python-logo-notext . svg . png';
? >
next, you can call this file in the main page/index.
< ? php
include ". /page/images . php";
? >
< html >
< img src="< ? php echo $img; ? >" alt="" srcset="">
< / html >
2° Method => you can just save the image to a folder easy to target.
create a folder inside the same folder you are accessing your main page.
for example: I created a folder called (img) in the same folder my index.html is found, save the image with a short name.
so to access that image i would call the image like this
< img src="image/img.png" alt="" srcset="">
I tried to display my edited image with PIL package, when I tried to make it to display on the html <img src=''></img> it doesn't appear anything, but I see the file name on inspect elements was <img src="<_io.BytesIO object at 0x000001EDA8F76E00>">. How do I make the edited image display properly?
app.py
#app.route("/api/games/shipper/image/", methods=["GET"])
def games_shipper():
... # My stuff up here
image_io = BytesIO()
img.save(image_io, "PNG")
image_io.seek(0)
return render_template('image.html', image_data=image_io)
image.html
... // My stuff up here
<body>
<center>
<image src="{{ image_data }}"></image>
</center>
</body>
You can read the data from the buffer with the getvalue() function and then convert it. The base64 encoded data can then be passed to the src parameter as a data url.
from base64 import b64encode
#app.route("/api/games/shipper/image/", methods=["GET"])
def games_shipper():
... # My stuff up here
image_io = BytesIO()
img.save(image_io, 'PNG')
dataurl = 'data:image/png;base64,' + b64encode(image_io.getvalue()).decode('ascii')
return render_template('image.html', image_data=dataurl)
If you pass the image as a dataurl, there is no way to shrink the string. However, there is the possibility of serving the file as pure image data. You can use send_file in another endpoint for this. You serve the page (template) in one endpoint and the image file in a second.
from flask import send_file
#app.route('/')
def index():
return render_template('index.html')
#app.route('/image')
def game_shipper():
# ...
image_io = io.BytesIO()
img.save(image_io, format='PNG')
image_io.seek(0)
return send_file(
image_io,
as_attachment=False,
mimetype='image/png'
)
<body>
<center>
<img src="{{ url_for('game_shipper') }}" />
</center>
</body>
You'll need to encode your image in Base64 to display it in the img tag directly, see e.g. How to display Base64 images in HTML
The traditional way to display images in Flask templates is to save the image in Flask's static folder and link to it in your template like so
<body>
<center>
<image src="/static/{{image_name}}.png"></image>
</center>
</body>
I need to find an automated way to update href URLs in a HTML file with the corresponding image alt text the anchor tag is wrapping while also including leading and closing RPL text.
Start:
<img src="/images/image.jpg" alt="ALT_TEXT">
End:
<img src="/images/image.jpg" alt="ALT_TEXT">
Breaking down the new URL:
First Variable: ${clickthrough('<br>
Second Variable: ALT_TEXT<br>
Third Variable: ')}
Anyone know where I should start in designing a solution for this problem? What coding language might handle this?
The language that you are looking for is JavaScript.
Here is a working example that does what you mentioned. (and here is a codepen with the same example)
const anchorElements = document.querySelectorAll('a');
[...anchorElements].forEach((anchor) => {
const altText = anchor.querySelector('img').alt;
anchor.href = "${clickthrough('" + altText + "')}";
})
<img src="https://place-hold.it/300x100" alt="text1">
<img src="https://place-hold.it/300x100" alt="text2">
<img src="https://place-hold.it/300x100" alt="text3">
Need help again ;)
I would like to show a photo in my Angular page. These are my steps,
REST API gets a document/record from backend MongoDB. The base64 images are stored as this.
The images/data are loaded into an array {{file_src[i]}} in the component code, then the component HTML will show the image as below
Situations:
If I used "img srcs={{file_src[i]}}", I got insecure operation. My REST API server has CORS enabled. Since the image is base64 data and doesn't have any URL, I don't know it is related to CORS.
I googled around and found the ng-src and data-ng-src directives. Both of them don't work too. Please see my binding error below.
Question: how to show the base64 image in my Angular page?
------Code as requested by Vic--------
<section class="fhirForm">
<fieldset>
<legend class="hd">
<span class="text">Photo</span>
</legend>
<div class="bd" formArrayName="photos">
<div *ngFor="let photo of patFormGroup.controls.photos.controls; let i=index" class="panel panel-default">
<div class="panel-body" [formGroupName]="i">
<label>Description</label>
<input type="text" class="form-control" formControlName="desc">
<label>Photo</label>
<input type="file" size="30" multiple formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input>
<!-- img src={{file_srcs[i]}} crossorigin="anonymous" alt="" /-->
<img data-ng-src={{file_srcs[i]}} alt="" />
<span class="glyphicon glyphicon-remove pull-right" *ngIf="patFormGroup.controls.photos.controls.length > 1" (click)="removePhoto(i)"></span>
</div>
</div>
</div>
</fieldset>
<div class="margin-20">
<a (click)="addPhoto()" style="cursor: default">
<small>Add another photo +</small>
</a>
</div>
</section>
initPhoto(desc?: String, photo?: string) {
//Add new entry on the 1 dimensional array. Allow 1 photo per section
this.file_srcs.push(photo);
console.log("Photo for file_srcs: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
return this.formBuilder.group({
desc: [desc],
photo: [photo]
});
}
Please see the console.log. It showed that this.file_srcs are valid.
------------- Error Message in Chrome -------
------------- UPDATE 1 -----------
If I commented out the "input type=file ..." line above the "img src" as below, I can see the photo. What's wrong with my input? Sorry, I don't remember what is that #input for.
Hence, my issue may not be in the photo, but on the input line ;) Shame on me!!!
<label>Photo</label>
<!-- input type="file" size="30" formControlName="photo" name="crud8" (change)="photoChange(input, i)" #input -->
<img src={{file_srcs[i]}} crossorigin="anonymous" alt="" />
--------- RESOLVED -----------
Thanks a lot for all the help!!!
i. the base64 image isn't the root cause;
ii. the file input "input type=file" was initialized by incorrect supplying the base64 image as the default value. It caused the error - failed to set the value of HtmlInputElement is correct in IE. The error message 'Insecure Operation' may be misleading in Firefox.
Hence, the root cause is not related to the base64 image. I would like to delete this thread a week later.
initPhoto(desc?: String, photo?: string) {
this.file_srcs.push(photo);
console.log("Photo for file_srcs[" + (this.file_srcs.length - 1) + "]: [" + this.file_srcs[this.file_srcs.length - 1] + "]");
return this.formBuilder.group({
desc: [desc],
photo: [""] //This was photo: [photo]. After supplying the default value as "", it works well.
});
Best regards,
Autorun
Fetch the base64 content in your controller like this:
$http.get($scope.user.photo).then(function(response) {
$scope.user.data = response.data;
});
then display it on view
<img data-ng-src="data:image/png;base64,{{user.data}}"/>
I use base64 image a lot and haven't see that error before. Is it caused by the crossorigin attribute?
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAAA+0lEQVQ4T6WS3W3CMBSFz40QvDJCu0GYALJB2QBeUFzjCm9AJ0gLMQl9STegG5QNYARG6CsI+SKjpmppSY3w8/10fnwIVzy6lE2SollrbBcAPV8ET2fzOzAXDNYPUrx6wxOT9QjkwL4DnWMvODV5wUAP4EclxbiM+i88meUJMUYA3pSMu987qoRLqwDW+10j0rr/4QV/lrNwxwGClpSD9enPHJXTdD5i4vY+YK2F2BjzElrYdwDN05x/KpelMOGJGB0AIQGboYxvz23hR+apyVcO+jq2HCklll7wcT31rbMbgrBU93FUtcBfbSdZdlOztILlbpWq90jOqR8Au8VfIQFLZecAAAAASUVORK5CYII=";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<img src={{base64}} />
</div>
How to show image using data url in html page from ASP.NET MVC4 c# application ?
I tried code below in Chrome and in Internet Explorer but empty image appears. There are no errors in borwser console window.
Image url is returned form signature pad https://github.com/szimek/signature_pad
Is is possible to show it or should I convert to png file in controller ?
html:
<!DOCTYPE html>
<html>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxcAAADVCAYAAAAl6A0eAAAcKElEQVR4Xu3da6x0V1kHcG6ltlRQlKKI8WAwxEgU0GirEY7GGCVGazQRhKRvo0aIRvATaFSKEuWD0fpBjJfEt15CPxitH0CDUY RD6IR8QKCQTlyaSViEKFoAanPX/eKq7sz58x5z5rzzuW3k5XZM7P3s9b 7TUz65m998zDH2YiQIAAAQIECBAgQIDAAIGHD4ghBAECBAgQIECAAAECBB4mudAJCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIEFgk8ox58XJWMF/ 9ylswEThNQHJxmpDnCRDYRYFPq41KyZQPzHY/85kOp8cz35bLB2y739bpbdq6LWZ77kNTrDzf13XcrZw6cn/err7 tvi83Q/0jaj5NgjIcn2b m2dt3FZ/a2uvu5F296eb/Utq7uPs2h7T6pvvp39ZrfPsvk aJ6nWfexWttzu6jOeV1t b7ufvv7bernT9qe1p75Z3S242DqJxnkte1r y/PzePO2zfvP/P sqyOvv/P 2K//9Pf0454LFpn1l0X3m2vlbSttf8ssbL dVWu7V4D87413 ftNfHEmrm/e3K //r 3 Y/WstfP9W1bH/3Rln241X tduHJ7m0vtXXk Xb/u/Xbe7X1IOfOCFo1n10lY91cVrb76vHHnPCuu u5/6gyquqHK yQy2zXwKSi/3a37aWwC4JHNTGpGQw9YzpAzLb1x7vP3w/fdrw/oMwH6R3V8kgLeskRu5nOpweX TVDz5P8pwP/Fp70obUl9vUnXpTLk/BLnV1t VyOx8cZRCRxxdNid3qy20brPWD0L7 xGnb3urPY619LVYb5Cwb1LTBVluub2Nipc7E7a1vmR7vl23b2lu3mG175h5zh/k2L7JO3YnT kCLsci6b1O2Y9Eyrc5s39G0TOaXxZ23edn9FjfPp 7EbG3u23GaySKjft82476OxMw WxZ7/ngGrE9a0r7U1ZKE1pYkI3kst5nm zl1Z1tTTyt9jH eHu9jJM4jqnxyipf15vXOLXI/bXhklRum VXWyXofmdZZFHOXH8u tYqR7u8kbbt7AKSi7ObWYMAgfUJ9AOI1HJQ5fOqPHOqMvczsMqHfgYVx9PjuV00n6fzeD84W1/rRSZAYF8FWpKV95o EW3J0vz53M97U3s87239unHs37f6pKs9194v81zW76cWf/54W2ZeV3s86yU5vLF7T72p5p9eJUdCnrNgBz /HrtrX3e87X6ogORCryBA4KIEkhTkgyvJQv9taI4q5Ll8O5mSD8M8f/fUsMzn8fZBK1G4qD2mHgIECDxYIO/HL6/y4iqP7Z66t Z/qMqdwAhILvQBAgRGCSQpSPmSKTlIwtAey3vN8ZQgJFHo51N/uz qLeIQIECAwPoEnluhX7cgfI5u/GSVV6yvapE3XUBysel7SPsIbI5AO9qQFiVpSBKR05Uy3xKE3LbkIQlDpqPN2QQtIUCAAIFBAndUnJcsiZXPgdumz4NB1QmzLQKSi23ZU9pJYP0COdKQqT99KclDTkNKgtAezwdKm/JcPkRMBAgQILB/AvlcyPUWT1uy6d9bj//S/rHs9xZLLvZ7/9v6/RLIkYd8EORi6P6UpYO6n seWhIRlf7og Rhv/qJrSVAgMBZBfKZkuvkck3dfPrNeuCFZw1o e0VkFxs777TcgKLBNqpS3mDP6zS7rejDn/dJRHtqMNxPZZiIkCAAAEC5xG4pVb tSqfOgvyg3W/P p9njqsu ECkosN30GaR2CBwMGUNOSpzN9aJUcekkhkStJwvKQAJUCAAAEC6xTIZ9Hrq9zcVfLKmr99nZWKvTkCkovN2RdaQqAJtKMM/a8u5c06r9ckDm3KIegkEXkut05f0ocIECBAYBMEcqTiZ7qGvK/m818Z/WfYJrRTG9YgILlYA6qQBFYQOKxlcurSwZQcJKFoSUVWzx/Eza97SAKRYiJAgAABApss8IJq3G/MGujoxSbvsYFtk1wMxBSKQCfQkoYcfch8K30CkcX/ZEoYWuLQEgrf7uhOBAgQILCtAjmi/tYq bfvfmo/HrKt26XdKwhILlZAsgiBBQLt oYkDYdVkgwkkWhHILJKlskRiHYNREscctseg0uAAAECBHZRIJ B91S5rtu4X6z5F 3ixtqm/xeQXOgNBJYLJHFopy5lvh11yG2m9q/Tmc/1D 3ah6Pp eO6dQRCDyNAgACBfRV4dW34y7qN/6 a75ONfXXZ6e2WXOz07rVxKwgkUeivfTis 0kkUuZTfwpTEoh2BGKFaixCgAABAgT2TiBfur2jyo3dln9fzb9m7yT2aIMlF3u0s/dwU/OmlpIE4jFVnjolDXnscHpuzpL/gTjuEockEJKIPew8NpkAAQIEhgj8SEX5iS7SnTV/aUhkQTZSQHKxkbtFo1YUSILQ/m06q7TTlg6mJKIP8 G688kqR1VyqlISjD5xyOMmAgQIECBAYLzAA13IfAbnwm7TjgpILnZ0x275ZrXkIIlDkoDPrvIVU1LQXzC9aDM/VA8eT8UF1FveETaw bdUm36gyv1V0r9uqPKBqW v27fPs3nw/O0623SzzOlv5oIECCwywJ5v8yPnrTJ HOH97adu8M7d4M3LQlCEofDqY0nHXHoN6P/5aUMyNoALm9amY42eJs1bfsFDmoT3nXOzUhScu2SGO tx99ZJX07fTrX LS fc5qrU6AAIGrKnB71f6KrgVPmd7rrmqjVL4eAcnFelz3MWqOMLR/lM4gLPcztcevqfknV8lzp039dQ/H0wDLIOs0Nc vW CwKvjjdVeyIH6S6CQe7QhJXhPtqEjmU3LEzmvkKuwcVRIgsJJAxgIf7JZ8c81/6UprWmjrBCQXW7fLNqLBB9WKJBLPqvLsKrmfsurUBkIZILWLpfvbVeNYjsBFCxxVhc/pKs3PKr6pSk7de1SVX5 e 8y6TTIwn/LDAvdVaX0/z dDN0fvHlHlsdNrKa n/hSCVbfzH2vB91Q5nkraK/FYVc9yBAisU C3Kvi3dRV8Tc3nPcq0YwKSix3boWvanAx0MqDK eYZBOX fMopSxnQZGqJQubbY7ntH19TU4UlsHaBJAOnXU8xqhHtlMGbK ATp9dfOxp4ljrS3r p8k9Vjqrk6KAjHWcRtCwBAucVeF4FeG0X5JU1f/t5g1p/8wQkF5u3TzahRQfViHxrejiVDHD6Kd EZoDSikHKJuw1bdhHgXbUI9ue12uOjDyhSl7DqyQhd0 v43aNxz4a2mYCBC5G4Lurml/uqkqi8Z0XU7VaLlJAcnGR2uPryqA/30geLwmdAUb IC77ObcZbLRrIdoqbXCSODmV44ur5Cdb58vlyEQGIperSCbG70sRCaxLIK/lwyo3TaU/rWte59vqgT fXuN5necIx0UdpVnX9otLgMBmCOR9qL9uLV9Uzscam9FSrTiXgOTiXHxXbeUcWvy5Kv0/Xt5T9/ hynGVg2kwcZ4GOjpxHj3rEthsgXwxkdMc82Gf fx627IpSUYrSTaONnvTtI4AgQ0WyFgl16i16baaubzB7dW0KxCQXFwB2lVeJS/CWwe3of03RAYQueDqjVV8WzkYWTgCGyyQbw9fXCUXWH55lZOSjf u5/OnlO0I5lHNp Snc00ECBA4SeDV9eTLugXy3pH3HdMOCUgutm9n5gP9rL8i845a5/erJGFop1G15CG3TnPavn6gxQTWKdAf2TjpNKq DfmS4neq5CLN43U2TmwCBLZa4N3V s/ttiD/1u0Lza3epQ9uvORi 3ZmPvTzc5dPX9L0nBp1b5WjKWnIdRImAgQInEfgoFbOe883V/miKvnlqlzHtWy6o55IkmHAcB516xLYTYFfqM16Ubdpz6/5u3ZzU/dzqyQX27vf2/nSOZ2hHY1IInG8vZuk5QQIbJlAu1j8u6rd3zRre96LkmT8rvelLdurmnulAu3zuF2knNtW5ol2kvMk7P2UZd5f5c92/DXz3Nq 13UbnmtIX3ql6NbbPAHJxebtEy0iQIDANgocVKMvV1l0GlV/ uVRLZNTqP6qius0Fu/pWOb019ym9IPQZ9b9XPfyH1Xaqa6J0gavH63566u0AW6rYX6/Ld8ev64WzFHvZYPhNnBuy6Vdfb39wDqxs9y1Xbx S1vdGYNkWx6/mOF/t2mVZVJ3PPInlPOpxfhIPfHxzmU 2M pOemX bXEtm2LYqWu 6dtW9LsIQ8fV5Tfm9qUP t8S5V/q/J3VeZtH1LhBQfJ9rWjn5l/ygXXr7o1Ckgu1ogrNAECBPZQIN9A3l7lpIvCe5Y31J0MiC9XSbIxcuCUgWAG6bnNqVy5/qxNGUTmwvR gJ7llp3uleXzL ptyufnu6rkZ7rPOh1M9SRpSJ3t9lk1f02VDMyvdMpA9FOudGXrbYVAEo07quT1crwVLX5oI9P l8xeT1u6KZo9F5Bc6BMECBAgMFogA ZbqryqyuecMXgG/ClJODJI/kSVR1X5lyr5Rv7vq/xtldTxWVXePsXPN B/WuUrq QXrzJgPzhj3SMWb99qJ2nJIDBT2ppvZh9d5SyJQxKX464kZu7nn9aT6GQ jyV K/39VbanLR /R56wwqrLtRB9vLRtPrV42b85qnAwW6A9n9ssk/9hypRY/XPtsfSPllS1BLXdZp1863/S9iVOa3Pa0trc6utjpT/ecApu/tDyvgXLJMl9WpU UW2LfUHNPOmUuP3TD9Sd91T57Sp3V/lgF7f1vTOEu9BF8/6QH4BoU14fxxfaApWtTUBysTZagQkQIECgBDLIP6ySQVpub66SQbbp/07DySAwg6p2m8Qhp/gYaO1nD8nr5FKVDL5zimGS7L okkQ6SclZpiRESTrurHJ0lhUvYNm8L TUyDb9fM18/wXUq4oLEJBcXACyKggQIEDgQQIZOB1W foqX7hmmwzgc556vmnOACuDtydUyWlOf9nVnW 9n1rlvVUy8GlTBmjtW/MP1Hzup R6giRJ ea4n anT W5LH9cpX17nvkUE4GzCrTXzjfUimdJNr6nlv Vs1a2xuUvVexf7eLn1 VuX2N9Ql ggOTiArFVRYAAAQIPETicBhWr/p/GMsIM4HNNxVurZMB/VOV4KtgJ7KpAXj8p317l86ucdNpdfgxgU06X rFqSxKKNv1hzXzdru6kfdsuycW 7XHbS4AAgc0UyBGFHDHI6R85f75N7dz2nJd/PJXN3AKtInD1BQ6qCa0c1vytsyblD z qMpRlfxMdLuW5KJbnv/remFXaf6j6yxHYi66veo7g4Dk4gxYFiVAgAABAgQIbJHA/MLpvulJLC5XuRp/ePmzVe9Lu8Yc17yfo92ijnVSUyUXO7IjbQYBAgQIECBAYIHApXos/4q97CeK86d9L6/Sfp1s3Yg5SpmL1HONUz8Zk65b/oLi25EXBK0aAgQIECBAgMBVEjioeu o8i0n1J8jGUdVbquyrtOlXlCxX1Nl/oeH Qln/89ylTrH6GolF6NFxSNAgAABAgQIbKZAkoycKpUjFfnPjUVTrsvIn0 OSDAOK853VPmyqSxT8WtRm9lfrqhVkosrYrMSAQIECBAgQGCrBfIP389esgUfq8dfX WsRzFyytMPV/nqKjetqJP/4bi04rIW2wIBycUW7CRNJECAAAECBAisQeCwYubC6m ssujPLfO/LfmltvyC2xurPL5Kfs723ir56edMX1vlydPtwYpt/M9a7s1VfrpK/ujPtEMCkosd2pk2hQABAgQIECBwBQI/Wuv8 BWst oq76sF31nlaEomNuX/NlZtv XOICC5OAOWRQkQIECAAAECOyiw7BecrmRTP1wrva3KXVWSRCShMO2RgORij3a2TSVAgAABAgQInCDwvHruxio/VeX6BcvldKacIvUZVR6o8rgqb6qSX396w5RIOM1pz7uY5GLPO4DNJ0CAAAECBAjMBA7q/ldVua7KPVVycbeJwEoCkouVmCxEgAABAgQIECBAgMBpApKL04Q8T4AAAQIECBAgQIDASgKSi5WYLESAAAECBAgQIECAwGkCkovThDxPgAABAgQIECBAgMBKApKLlZgsRIAAAQIECBAgQIDAaQKSi9OEPE AAAECBAgQIECAwEoCkouVmCxEgAABAgQIECBAgMBpAv8DFBfj9Ld6cr0AAAAASUVORK5CYII=" height="100" width="300">
</body></html>
Razor view:
<img src="#Model.ImageData()" height="100" width="300" />
Is is possible to show it... ?
Yes, it is perfectly possible to show base64 encoded images on <img>'s tag src attribute.
http://jsfiddle.net/7dnygshL/
Just, be aware that on the base64 image your provided, the image is a pure transparent image... That may be confusing you, but inspect the element and see that the image is been loaded...
You're better off using a png so that it can be cached.