I'm trying to add an img tag to a wicket page. I have not the image as file, I have its URL. I retrieve the URL using a REST service that is consumed in the page constructor.
I tried the following code, but it didn't work (I got a Failed to find markup file associated exception):
image = new Image("chart-img", title);
add(image);
image.getMarkupAttributes().put("src", url);
Can anyone help me?
Thanks
Laura
You can try this also
Image image = new Image("chart-img", "");
image.add(new AttributeModifier("src", url);
image.add(new AttributeModifier("title", title);
add(image);
You just use a WebmarkupContainer for that:
image = new WebMarkupContainer("chart-img") {
protected void onComponentTag(final ComponentTag tag)
{
super.onComponentTag(tag);
tag.put("src", url);
tag.put("title", title);
}
};
add(image)
Since some time there is also org.apache.wicket.markup.html.image.ExternalImage for exactly this use case.
Related
I'm building some web app. On my frontend side I need to display images which are earlier uploaded to spring-boot hsqldb. Image data is stored as a BLOB type in database. I want to display them as:
<img href="/api/photos/0">
In the past I was sending GET request to my api to get image data as byte array, than encoding it to Base64, sending back as a string "data:image/jpg;base64, myData" and putting it to img src and it worked perfectly.
Now I want to check some different approach and I got stuck.
This is my vue template:
<div class="card">
<div class="card-header"><h4>Some header</h4></div>
<div class="card-body">
<img class="card-img-top" :href="url">
</div>
</div>
This is my vue method building url:
export default {
data(){
return{
url:''
}
},
mounted() {
this.makeUrl();
},
methods:{
makeUrl(){
this.url="/api/photos/0";
}
}
}
And this is my spring-boot api controller:
#GetMapping(value = "/photos/{id}")
public String readPhoto(#PathVariable Long id){
return makePhotoUrl(photosRepository.findById(id).get().getData());
}
private String makePhotoUrl(byte[] photo){
String photoUrl = "data:image/jpeg;base64," +
Base64.getEncoder().encodeToString(photo);
return photoUrl;
}
I do get image data by accessing url directly by a browser, but my card is still empty.
Please help because i have no more ideas how to make it work.
So, after another day of research I've finally figured it out. Basically I've made two mistakes.
First, href specifies link destination, but it should be used only with "a" tag:
link
If i want to specify img source I should use "src":
<img src = "www.someOtherWebsite.com">
Second, it appears that if I want to return url as a direct response from api, it must point to a physical file. I might be wrong, so please correct me.
I've changed my controller to:
public ResponseEntity<Resource> readPhotoById(Long id) {
Photo photo = photosRepository.findById(id).get();
return ResponseEntity.ok()
.contentType(MediaType.parseMediaType(photo.getType()))
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + photo.getName() + "\"")
.body(new ByteArrayResource(photo.getData()));
}
Now it works as expected.
Cheers :)
I'm try to use html5 notification,now i'm strggle to load html element into notifications body
Below code I've tried
let string = document.getElementById('map')
let myNotification = new Notification('Incomming calls', {
body: string.innerHTML
}).addEventListener('click',function(){
console.log('Notification clicked' + message)
})
Thanks in advance
You might want to check if notification works for the browser you are using as test, better still check check this link with this also.
Then you need to be more specific about what the issue is, is there an error message or an output you don't like for us to help you better
I am creating an image dynamically on the page using dataURL,
var aImg = document.createElement('img');
aImg.setAttribute('src', dataURL);
aImg.setAttribute('alt', 'pic');
aImg.setAttribute('width', '438px');
aImg.setAttribute('height', '267px');
aImg.onclick = (function() {
//download the image object
})();
I am not sure what to do to download this image object that is a PNG image.
Can someone give hints?
If you want the image to be displayed the follwing should be fine :
aImg.src = YOUR_URL
if you want to save it on to the file , you shoud redirect and let the browser take care of the rest. JS redirect can be done as follows :
window.location.replace(dataURL)
If you want the browser to give a pop-up saying "Save File" check out this link : http://muaz-khan.blogspot.in/2012/10/save-files-on-disk-using-javascript-or.html
I'm working on a "browser extension" using "Kango Framework" (http://kangoextensions.com/)
When i want to link a css file i have to use external source (href='http://mysite.com/folder/mysite.css), how should i change the href to make is source from the plugin folder ? (ex: href='mylocalpluginfolder/localfile.css')
i've tried 'localfile.css' and putting the file in the same folder as the JS file.
$("head").append("");
How should i change the json file to make it work ? Should i declare the files as "extended_scripts" or "content_scripts" ?
I've a hard time finding support for this framework, even though the admins are awesome !
Thanks for your help. (please do not suggest to use other solutions, because i won't be able to code plugins for IE and Kango is my only option for this). I didn't find any samples matching my need as the only example available on their site is linking to outside content (christmas tree).
If you want to add CSS in page from content script you should:
Get CSS file contents
Inject CSS code in page
function addStyle(cssCode, id) {
if (id && document.getElementById(id))
return;
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (id)
styleElement.id = id;
if (styleElement.styleSheet){
styleElement.styleSheet.cssText = cssCode;
}else{
styleElement.appendChild(document.createTextNode(cssCode));
}
var father = null;
var heads = document.getElementsByTagName("head");
if (heads.length>0){
father = heads[0];
}else{
if (typeof document.documentElement!='undefined'){
father = document.documentElement
}else{
var bodies = document.getElementsByTagName("body");
if (bodies.length>0){
father = bodies[0];
}
}
}
if (father!=null)
father.appendChild(styleElement);
}
var details = {
url: 'styles.css',
method: 'GET',
async: true,
contentType: 'text'
};
kango.xhr.send(details, function(data) {
var content = data.response;
kango.console.log(content);
addStyle(content);
});
I do it another way.
I have a JSON containing the styling for specified web sites, when i should change the css.
Using jQuery's CSS gives an advantage on applying CSS, as you may know css() applying in-line css and inline css have a priority over classes and IDs defined in default web pages files and in case of inline CSS it will override them. I find it fine for my needs, you should try.
Using jQuery:
// i keep info in window so making it globally accessible
function SetCSS(){
$.each(window.skinInfo.css, function(tagName, cssProps){
$(tagName).css(cssProps);
});
return;
}
// json format
{
"css":{
"body":{"backgroundColor":"#f0f0f0"},
"#main_feed .post":{"borderBottom":"1px solid #000000"}
}
}
As per kango framework structure, resources must be placed in common/res directory.
Create 'res' folder under src/common folder
Add your css file into it and then access that file using
kango.io.getResourceUrl("res/style.css");
You must add this file into head element of the DOM.
This is done by following way.
// Common function to load local css into head element.
function addToHead (element) {
'use strict';
var head = document.getElementsByTagName('head')[0];
if (head === undefined) {
head = document.createElement('head');
document.getElementsByTagName('html')[0].appendChild(head);
}
head.appendChild(element);
}
// Common function to create css link element dynamically.
function addCss(url) {
var css_tag = document.createElement('link');
css_tag.setAttribute('type', 'text/css');
css_tag.setAttribute('rel', 'stylesheet');
css_tag.setAttribute('href', url);
addToHead(css_tag);
}
And then you can call common function to add your local css file with kango api
// Add css.
addCss(kango.io.getResourceUrl('res/style.css'));
I wanted to save the google map into an image from a webpage.
while i was searching for that i got this program.
http://www.codres.de/downloads/gms.exe[^]
besides other alternatives like print screen i wanted to use a program or map api which can save a specified dimension of google map instead of the screen.
i have used browser component in c# for http access and for displaying certain webpages.
I want to know whether there are options to capture the browser screen to image using any c# functionality or even the browser component would have given such options. just a guess.
i would like to have answers, suggestions on how to capture the map with custom dimension and zoom size to an image.
I used this to get captcha Image from the current page, so you can use similar code just amend the imageID to point to the google map image and use this solution for zooming.
public string newsavefunction(WebBrowser webBrowser1)
{
IHTMLDocument2 doc = (IHTMLDocument2)webBrowser1.Document.DomDocument;
IHTMLControlRange imgRange = (IHTMLControlRange)((HTMLBody)doc.body).createControlRange();
string imagename = string.Empty;
try
{
foreach (IHTMLImgElement img in doc.images)
{
imgRange.add((IHTMLControlElement)img);
imgRange.execCommand("Copy", false, null);
using (Bitmap bmp = (Bitmap)Clipboard.GetDataObject().GetData(DataFormats.Bitmap))
{
bmp.Save(#"F:\captchaimages\captchapic.jpg");
}
imagename = img.nameProp;
break;
}
}
catch (System.Exception exp)
{ }
return imagename;
}