I would like to ask on how to get the image URL if the image is inside DIV
<div style="background-image: url(https://img.vggcdn.net/img/cat/11554/2/13.jpg);" class="ibk radius-circle bkgdCover bkgd-nr profile-image"></div>
thanks in advance.
no need for this i already got the answer
let event_image = document.querySelector('div.ed-event-image-container').childNodes[1].style.backgroundImage;
event_image = event_image.split(/"/)[1];
You can also solve this problem from this way,
await page.goto('Enter your page url');
await page.waitFor(5000);
let serachElement =".profile-image";
/**
* Check for image exit or not then return image
* otherwise return Image not found message
*
*/
let checkForElement = await page.evaluate((sel)=>{
let elementCheck =Array.from(document.querySelectorAll(sel));
if(elementCheck.length){
return elementCheck[0].style.backgroundImage
}else return 'Image not found';
},serachElement);
Related
I have a document which has the following example text:
"I want to remove this {{image1}}, but not this image2"
I need to remove image1 (actual image), but not image2. The catch is that image1 is not always there. So what I do is:
I search for {{ - resultStart = body.findText("\{\{")
I search for the first image after {{ - images = body.findElement(DocumentApp.ElementType.INLINE_IMAGE,resultStart)
The problem is that images.getEndOffsetInclusive() always returns "-1" so I cannot confirm that the image found is the first image and not the second one. Is there any way around this?
I created a test doc with This is {{image1}} followed by an inline image. The following script will find the image.
function findImage() {
try {
let doc = DocumentApp.getActiveDocument();
let body = doc.getBody();
let element = body.findText("{{image1}}");
element = element.getElement().getNextSibling();
console.log(element.toString());
element.removeFromParent();
}
catch(err) {
console.log(err);
}
}
Execution log
7:51:32 AM Notice Execution started
7:51:34 AM Info InlineImage
7:51:33 AM Notice Execution completed
I want to convert my HTML element to png. So I'm using the html-to-image package to do this. I'm getting a blank image when I'm converting. Here is my code
<div #myDiv id="content" [innerHTML]="tempInnerHtml"></div>
<img [src]="snapshot">
this.tempInnerHtml = this.sanitizer.bypassSecurityTrustHtml(this.tempValue);
var node = document.getElementById('content');
htmlToImage.toPng(node)
.then((dataUrl) => {
console.log(dataUrl);
this.snapshot = dataUrl;
}).catch((error) => {
console.error('oops, something went wrong!', error);
});
My inner HTML loads without any problem but the output image is always a blank image. Can anyone help me to solve this? Thank you.
I'm having a problem trying to get my AWS Lambda function to successfully output a series of HTML links when its running a SQL Query.
private string GetEventSearchResults(ILambdaContext context, List<Event> events, string CustomerNumber)
{
var result = string.Empty;
var link = string.Empty;
if (events.Count > 0)
{
result = $"Events for {CustomerNumber}:";
foreach (var evt in events)
{
link = "http://localhost/event/" + $"{evt.ID}";
result += $"<br>Event: {evt.ID} - Status: {evt.Status}";
}
}
else
{
result = "No Data found matching your query";
}
return result;
}
When this method is called by my Lambda function as a LexResponse,
replyMessage = GetEventSearchResults(context, eventList, query.CustomerNumber);
return Close(
sessionAttributes,
"Fulfilled",
new LexResponse.LexMessage
{
ContentType = "PlainText",
Content = replyMessage
}
);
This response is then rendered in my HTML page by a Javascript function. Relevant portion of the Javascript that renders the response:
function showResponse(lexResponse) {
var conversationDiv = document.getElementById('conversation');
var responsePara = document.createElement("P");
responsePara.className = 'lexResponse';
if (lexResponse.message) {
responsePara.appendChild(document.createTextNode(lexResponse.message));
responsePara.appendChild(document.createElement('br'));
}
if (lexResponse.dialogState === 'ReadyForFulfillment') {
responsePara.appendChild(document.createTextNode(
'Ready for fulfillment'));
// TODO: show slot values
}
conversationDiv.appendChild(responsePara);
conversationDiv.scrollTop = conversationDiv.scrollHeight;
}
However, the output shown by the Lex bot is as shown below:
Lex Bot Output
Can anyone please help me understand what exactly is going on? Is the content type of the Lex Response responsible for this? (there's only plaintext and SSML available for Lex Response so I can't change that)
Also, if possible, can anyone please explain how to fix this if at all possible? Thanks!
Your code is correct and output is also correct.
However the console window is not able to render the HTML part of your result.
The client on which you will deploy the chatbot, is responsible for rendering the output. For example, if you respond with a ResponseCard, console or website will not be able to render it correctly but it will be displayed correctly on Facebook and Slack. So, if you integrate your chatbot on some website it will show the links in your output correctly as you desired.
You can try to integrate your chatbot with Slack or Facebook first, to see the rendering of output.
Hope it helps.
After further trial and error, I managed to get a solution that works for me.
function showResponse(lexResponse) {
var conversationDiv = document.getElementById('conversation');
var responsePara = document.createElement("P");
responsePara.className = 'lexResponse';
if (lexResponse.message) {
var message = lexResponse.message.replace(/"/g, '\'');
responsePara.innerHTML = message;
responsePara.appendChild(document.createElement('br'));
}
conversationDiv.appendChild(responsePara);
conversationDiv.scrollTop = conversationDiv.scrollHeight;
}
By making the LexResponse an Inner HTML, it fixed the markup of the text and thus the link can be seen everytime.
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'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.