I'm using the following library to generate QRCodes: https://marcoagner.github.io/Flask-QRcode/
I would like to give the user the option to download this QR and set it as a wallpaper. The problem is that when I generate the qrcode, if you download the image via pressing the image for a few seconds, you only download the QRCode and when you go to your "camera roll" and you set it as a wallpaper it's something like this:
My question is: How can I set white borders around the QRcode so when the user downloads the image he/she can set it as a correct wallpaper?
This is my code:
<center><img src="{{ qrcode("http://myherokuapp.com" + url_for('view', useraid=useraid),box_size=4 )}}"></center>
Thank you in advance.
I've just realized this library has a border option, which is exactly I was looking for, so I made:
<center><img src="{{ qrcode("http://myherokuapp.com" + url_for('view', useraid=useraid),box_size=4, border=50 )}}"></center>
Related
What is the best way to attach my website logo inside activation mail? I tried to do something like this:
#lru_cache()
def logo_data():
with open('templates/authentication/logo.png', 'rb') as f:
logo_data = f.read()
logo = MIMEImage(logo_data)
logo.add_header('Content-ID', '<logo>')
return logo
and then:
email=EmailMessage(subject=email_subject, body=email_body, from_email=settings.EMAIL_FROM_USER, to=[user.email])
email.attach(logo_data())
email.content_subtype='html'
email.send()
In my html file it looks like this:
<img src="cid:logo" style="width: 242px; height: 88px;"/>
but it doesn't work. The photo is actually added to the mail in attachments, but the <img> tag is empty and looks just like this:
What is wrong? I read also that attaching photos to email is not recommended because mail gets cause of that extra spam points. What is the best way to do this? Can I send my png logo without attaching it into attachments?
EDIT
I tried to add url (to my photo on google drive) like this <img scr="url"> but these properties disappear inside mail
You can use a CDN, like S3 or Google Cloud bucket to upload the image and add the url of the image in your <img src="URL"> tag.
I am quite new to Angular. My exact problem statement is -
I want to show a default image. If i click on the image, File selector window should open. When i select an image, i should be able to see and edit the image and finally this image should override the default image and also send this image to an API and display existing profile image if any. I want to do all this using HTML and Angular 4.
Please point me to any link if a solution to this problem already exists.
I have just been able to open the file selector till now by doing this -
<div>
<ion-input type="file" style="display: none" ngModel (change)="getFiles($event)"></ion-input>
<img src="assets/imgs/uploadImage.png" class="form-control" style="width : 20% ; height : 15%" (click)="selectFile()">
</div>
and
selectFile(): void {
let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
element.click();
}
public async getFiles(event) {
console.log(event.target.files);
}
To show the profile image again, it's depend on how is the api server store your image? what is the format in that api server send an image to you, binary, cloud url...?
But for choose file and send it to server you can take a look this post...
https://www.academind.com/learn/angular/snippets/angular-image-upload-made-easy/
I'm trying to concatenate Vue variable with image URL, but the browser didn't show the picture. Could anyone tell me what's the matter with my coding?
I have tried as follow.
The picture didn't show in the browser.
<img :src="'../assets/'+item.picture">
If I wrote as below, the picture is shown.
<img src="../assets/6cb38c91115bcdf0c824124e4b5ecb71.jpeg">
Thank you very much!
I am attempting to make a photo gallery asp.net MVC website, and part of that involves the setting of the src to a local folder that contains images.
#model MyProj.Models.PhotoIndexViewModel
<div class="row" id="tableSearch">
#foreach (MyProj.Models.VideoModel photo in Model.PImgList)
{
<div class="col-sm-3 thumbnail">
#Html.DisplayFor(model => photo.Title)
<a href=#Url.Action("View", new { id = photo.Id })>
<img class="img-responsive"src="#Url.Content(photo.ThumbNailPrev)" alt=#photo.Id /></a>
#Html.HiddenFor(m => m.searchTerm)
#Html.Partial("_Tags", photo)
</div>
}
</div>
The ThumbNailPrev is "~/Pics/.jpg", which relates to a folder in the main part of the project. The issue is that the image does not appear. When I check the image using inspector is says it isn't found at /Pics/(photoid)/jpg. I don't understand why it is doing this, as my pics and the image itself are present at that location. I have also made sure to include the folder in my project, but it still doesn't seem to find the image.
UPDATE:
I just tried something and confirmed it is something to do with the way I'm calling the path from the database. As if I hard code the EXACT same string as the one in the database it works. The question now is why does that work?
For want of a letter..
I finally determined the problem, and it was a pretty dumb one. In code I am saving a jpEg image, but calling it via jpg. After changing the .jpg to .jpeg in the view everything works... If you are having a similar problem, check and make certain the file extension is correct.
Hi I have the following html inside one of my javascript files.
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div id="infoWindowString">'+
'<img src="assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See more info</p>'+
'<p>see news</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
The problem is I cannot get the image to show up in the info window.
I realize this \could be because rails has some sort of helper function to show images in its webpages. But I haven't been able to find how to call it or what it is. Can someone help please.
EDIT- Changed to following after the response below:
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div class="infoWindowString">'+
'<img src="/Users/AM/Documents/RailsWS/cmdLineWS/Businesses/app/assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See Menus</p>'+
'<p>Upload a Menu</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
But image still not showing up :(
If you're using the default setup with rails asset packaging it will append a timestamp onto asset filenames meaning just browsing to /assets/images/foo.jpg won't necessarily give you what you want.
The rails helper to get an image tag is just image_tag 'example.jpg'. OR if you just want the url, image_url 'foo.jpg'.
For any given image you want stored you could attach it to a data attribute, for instance in a view you could do:
<a id="image_link" href="#" data-image-url="<%= image_url 'foo.jpg' %>">Click to see image</a>
You can get that path anywhere in jQuery using
var imageUrl = $('a#image_link').data('image-url')
You are using a relative URL for your image (assets/images/rails.png), so the browser will try to load it from an address relative to the current page. For example, if the image is at
http://example.com/assets/images/rails.png
but you are currently at
http://example.com/something/somepage.html
the browser will try to load it from
http://example.com/something/assets/images/rails.png
and it will fail.
You should be using an absolute URL.