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!
Related
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>
I would like a HTML to get an image file name as a parameter from another page and display that image. I only know a bit of HTML. I don't know PHP etc.
I have a website which has several HTML pages. I want to write an "image container" page which will be called from other pages. The other pages will pass it a bitmap file name and the container page will display that image.
Ideally the container page should be getting few other parameter like the width and height of the image.
In showimage.html:
Instead of this:
<img src="bitmaps/test.jpg" height="200">
Have something like this:
<img src="{parameter 1}" height="{parameter 2}">
And the calling page will call showimage.html with "bitmaps/test.jpg" and "200".
The Code:
style="background-image: url(wp-content/uploads/2018/03/example.jpg);"
Image is visible when doing this, but thats the whole reason im asking this question.
style="background-image: url(http://foo.com/wp-content/uploads/2018/03/example.jpg);"
wp-content IS the first folder in the path.
I've tried:
style="background-image: url('wp-content/uploads/2018/03/example.jpg');"
style="background-image: url(/wp-content/uploads/2018/03/example.jpg);"
style="background-image: url('../wp-content/uploads/2018/03/example.jpg');"
So the question is, why isn't the image not showing when the path is correct?
Solution Implementation:
style="background-image: url(insert_your_localhost/wp-content/uploads/2018/03/example.jpg);"
The path isn't correct.
Try this:
style="background-image: url('../wp-content/uploads/2018/03/example.jpg');"
The solution is to call image URL with site URL functions like wp_upload_dir, site_url, content_url
Veysel Xankisiyev have already submitted the solution.
Based on your examples, I'm trying to explain whats wrong with each method you're tried.
url('wp-content/uploads/2018/03/example.jpg')
In this case, browser will treat this image URL relative to your current URL. If you are on the home page, consider example.com, the resultant image URL will be example.com/wp-content/uploads/2018/03/example.jpg.
This will work as long as you were one home page, consider if you are in some other pages example.com/about/, the resultant image URL will be example.com/about/wp-content/uploads/2018/03/example.jpg. it is wrong one.
background-image: url(/wp-content/uploads/2018/03/example.jpg);
In this case, it will treat url relative to the domain/host always. Even if you are one homepage or in other pages, the resultant image url will be
example.com/wp-content/uploads/2018/03/example.jpg.
But as you said it didn't worked in your case means, your WordPress url path will be something like localhost/wordpress/ or example.com/wordpress or so. In such case, the resultant image URL will be localhost/wp-content/uploads/2018/03/example.jpg , wrong one.
so iam trying to add a image i have saved on my project in image folder. But it dosent work
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).DataBind()
customer is the repeater html element the image element is in. I cant call the image element direct in the server code because the image element is inside a repeater element. So i have to use findcontrol method which works good. When i debugg the code i can se that it finds the right image element the problem is when i set the imageurl nothing seems to happen in the ui but i dont understand why can anybody help me please :)
<div>
<asp:Image ID="imageControl" Width="100%" Height="70%" runat="server"/>
</div>
To me it looks like you are not trying access controls within repeater in correct manner , it should be like :
If image is in header :
DirectCast(Customer.Controls[0].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
If image is in footer
DirectCast(Customer.Controls[Customer.Controls.Count - 1].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
Please have a look at this post for more details.
PS : Are you using vb ? cause i have used C# syntax, if yes change accordingly.
in HTML I have this wall of pictures with different foods.
<ul>
<li><p>Sallad</p><img src="img/sallad.jpg"></li>
<li><p>Pizza</p><img src="img/pizza.jpg"></li>
<li><p>Sushi</p><img src="img/Sushi.jpg"></li>
<li><p>Pasta</p><img src="img/pasta.jpeg"></li>
<li><p>Indian</p><img src="img/indian.jpeg"></li>
<li><p>Fish</p><img src="img/fish.jpeg"></li>
<li><p>Burger</p><img src="img/burger.jpeg"></li>
<li><p>Steak</p><img src="img/steak.jpeg"></li>
<li><p>Vegetarian</p><img src="img/vegetarian.jpeg"></li>
</ul>
My problem is basically that I have a search function, when I click on one of these pictures I want it to redirect me to another page, I know I can basically use <a href for this, but the thing is I want each of these picture to have one value so that my search function can read it and then display the search result from the database. I.E If I click the pasta picture, it will take me to the result page showing all the pasta dishes in the database.
If any of you have any other suggestions or solutions I would really appraciate it. Thanks a lot for reading!
Simply use a link that contains a query string.
<img src="...">
Do it likewise for the other elements. In your server-side code you can then access the GET variable named "search".
<img src="The URL of the image">
Example
<li><p>Sallad</p><img src="img/sallad.jpg"></li>
OR
<li><p>Sallad</p><img src="img/sallad.jpg"></li>
UPDATE
Try This
<li><p>Sallad</p><img src="img/sallad.jpg"></li>