Load an image into an html within a Webview - javascript

I'm loading my html inside the webView
<WebViewBridge
ref="webviewbridge"
onBridgeMessage={this.onBridgeMessage}
javaScriptEnabled={true}
injectedJavaScript={injectScript}
source={require('./Canvas.html')} ==> Here
/>
And inside the /Canvas.html/ file i have.
<img id="deleteImg" src="../../../../assets/images/close-red.png" width="20" height="20" style="display:none; position: absolute; z-index: 1000">
This path ../../../../assets/images/close-red.png works perfect if used in react-native code. But when I post it in the html, it shows up with a blue question mark

Related

Set full URL to Image source next.js

In next.js <Image source is setting source URL with just <img src="/_next/image....", but I want <Image source to set source URL with <img src="https://example.com/_next/image..." ( including domain ).
Reproducible Code:
use Image from "next/image";
// After importing the above, simply use the following:
<Image src={`/img/example.png`} />
Rendered Code is:
<img alt="test" sizes="100vw" srcset="/_next/image?url=%2Fimg%2Fexample.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Fexample.png&w=750&q=75 750w, /_next/image?url=%2Fimg%2Fexample.png&w=828&q=75 828w, /_next/image?url=%2Fimg%2Fexample.png&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Fexample.png&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Fexample.png&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Fexample.png&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Fexample.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimg%2Fexample.png&w=3840&q=75" decoding="async" data-nimg="fill" loading="lazy" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;">
So, if you see above, all the path starts with /_next/image...., but I want it to be https://example.com/_next/image... full URL of the host.
Do we have any settings in next.js or hack around to accomplish them?
Thanks
We tried googling and finding source relevant settings, but could not find any.
You need to use your loader for <Image> https://nextjs.org/docs/api-reference/next/image#loader

how to interact with shadow DOM elements for take the file.pdf with selenium 4.x, using php and chrome driver V95.0.?

Explain better:
I am automating the issuance of a certificate that is being generated in iframes
Through the selenium grid I managed to get to this last screen where the pdf is
I tried to print the screen with window.print running a javascript, I see the window for print but I couldn't proceed
:
$this->driver->executeScript("window.print()");
document.querySelector('pdf-viewer').shadowRoot.querySelector('viewer-toolbar').shadowRoot.querySelector('viewer-download-controls').shadowRoot.querySelector('cr-icon-button').click();//this work in browser, nope with selenium
From where I am I think there could be some ways to solve which I tried but didn't make any progress:
after windows.print() ,
press o key enter, maybe(two times),
click button save
maybe using keyboard control + s , key enter
right click, save page as, confirm
maybe using control + p
maybe using mouse for click in arrow down for download, but I got not find element, or dont know how to use coordinates for mouse
set preferences/capabilities for browser for when the window.print() not show where I liked save my pdf
I too tried set a preferences
I too tried $this->driver->getPageSource();
$options->addArguments(['--print-to-pdf']);
that I find here but not sure if it is working or how to use it.
<iframe src="asintegrarelatorio?UGsAuJNIMg0Bs79efCz_UN+WLY3wJLa3shybBaN2MhtwcBuQ28HYLHZjlWoShKh3akHt0HZM3+pL7TP3ksZMQQ==" name="EMBPAGE" width="900px" height="500px" frameborder="1" align="center" title="" style="" scrolling="auto">
<html><head><script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script></head><body style="height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);"><embed name="C065A881B0E7E51799DF65DCF351573F" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="about:blank" type="application/pdf" internalid="C065A881B0E7E51799DF65DCF351573F"></body></html>
</iframe>
driver.execute_script('document.querySelector("#printDiv > a").setAttribute("onclick","setTimeout(() => window.print(), 0);")')

Showing svg files over each others in html

Is it possible to add svg icons like files on top of another svg file, i'm using a simple object tag for my html code and i was wondering if i could add more svg files on top of the one that already shown
<object id="topOBJ" data="worldHigh.svg" type="image/svg+xml" width="1000" height="1000">Your browser doesn't support this type of files</object>
You can use absolute positioning to put one on top of each other. Extra tip! absolute items are relative to the closest parent with position:relative so you can use that to avoid them from flying all over the page.
As mentioned in the answer by Lau, if you insist on using <object>-elements you can overlay them using CSS positioning,
.combined {
display: inline-block;
position: relative;
}
.combined > :first-child ~ * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class=combined>
<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" type="image/svg+xml"></object>
<object data="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" type="image/svg+xml"></object>
</div>
The CSS in the example ensures the wrapping element (<div class=comined>) takes up the dimensions of the first object and overlays all other elements.
There is a nicer alternative though, using SVG to combine the other SVGs
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="0 0 50 50">
<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-annotate.svg" />
<image width="50" xlink:href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-arrows-compress.svg" />
</svg>

Custom code on Google DFP asynchronous tag

I need to run a campaign on Google DFP using a custom code that will add a full screen, responsive div, above my website. The problem, here: it just works using synchronous Google DFP tags, not asynchronous -- and it must be asynchronous.
I really don't know what the problem is (maybe the fact that the adsize is 1x1 and the iFrame don't know it should expands? Maybe my whole code should be out of the iFrame?), but I know the ad is loaded using a Friendly iFrame...
How could I make this happen?
Here's the code that was supposed to appear above my website.
<!-- INTERSTITIAL -->
<div class="container-fluid">
<a href="%%CLICK_URL_UNESC%%[%URL%]" target="[%TARGET%]">
<div id="AD_TakeOver">
<span class="FloatRight Exo PaddingRight16" style="position: fixed; right: 8px;" title="Anuncie você também no JUDÃO! Entre em contato. :)">
<svg style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" height="16" width="16"><path d="M1840.478 1080.596l61.522-426.8-397.714 61.775 240.748-329.09-333.15-243.29-264.875 362.072-51.6-331.62L668.593 114l66.246 425.767L98 328.564l394 544.24-302.02 46.91-61.522 426.798 454.81-70.64-268.363 366.838L648.055 1886l244.294-333.94 42.535 273.38 426.96 60.56-65.61-421.678 362.303 264.58 243.462-332.8-367.053-268.05z" fill="#FFF"/></svg> PUBLICIDADE</span>
<div class="Bottom" style="text-align: center;">
<svg style="margin-top: 62px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 306 306"><path fill="#FFF" d="M270.3 58.65L153 175.95 35.7 58.65 0 94.35l153 153 153-153"/></svg>
</div>
</div></a>
</div>
<style>
#AD_TakeOver{
background-image: url("[%IMAGE%]");
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
background-attachment:fixed!important;
background-position:center!important;
background-repeat:no-repeat!important;
height: 100vh;
position:relative;
border-bottom:8px SOLID #000;
border-top:1px SOLID #000;
color:#FFF; }
#AD_TakeOver .Bottom {
position:absolute;
bottom:0;
background-color:transparent!important;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAB4CAQAAAEFAdueAAAAhUlEQVQoz3WQ0Q5DIQhDTwtu///He9jVobKEkFKaFgWZMGmGGeY1613wMGkS/AW7sopHEct4r5j9qOzIKPpqIrChc15YJgufpa9E/w+906NErK32xOe8DiOEjLABjIhnvFoYn9s5mlwolrjjjq12XdaMy6CzUsPZuNzcPUbV4FjUL/mN+gBXngOnAbq0QwAAAABJRU5ErkJggg==) repeat-x;
background-size:2px 120px;
border-bottom:0!important;
overflow:hidden!important;
height:120px!important;
max-height:120px!important;
width:100%;
vertical-align:bottom;
line-height:120px;}
</style>
<!-- /INTERSTITIAL -->`
So the code example is the code that's specified in a creative?
The problem is exactly as you stated!
The reason it works in the synchronous version is because the code is inserted in the DOM directly. In case of asynchronous it's inside an iframe with a width and height of 1px.
I'm not a big fan of having that much HTML/CSS code inside a creative. There are a few solutions:
use a rich media provider (costs money and for something this 'simple', I'd go with approach 2)
write a JS solution (I believe that's how RMP's work, but I haven't investigated it)
Approach 2:
Either write some JS that's called inside the creative to set the width and height of the iframe OR (and what I prefer)
Inside your creative, write something like
<script>
showInterstitial('%%CLICK_URL_UNESC%%[%URL%]', '[%TARGET%]', '[%IMAGE%]')
</script>
All the HTML and CSS (except the background-image css of #AdTakeover) code can be moved to the sites html/css-folders.
You could add the interstitial-html to every page with display: none. Once this function is called, you can change it to display: block and update the required DOM-elements (the link, the background-image with an inline-style on the #AdTakeover) etc.

Alfresco Share web-preview collapsed issue

I'm using Alfresco 4.2b
I've a issue. When using some browsers (chrome by now) the document preview shows collapsed (it have the document but it is at 38px height)
The div that contains the embed field has a height in "style" that is always in 38px (also if i try to change it in firebug, it returns to 38px)
<div id="template_x002e_web-preview_x002e_document-details_x0023_default-full-window-div" style="position: absolute; left: 10px; top: 226px; width: 824px; height: 38px;" class="web-preview real">
<embed type="application/x-shockwave-flash" src="/share/components/preview/WebPreviewer.swf" width="100%" height="100%" style="" id="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" name="WebPreviewer_template_x002e_web-preview_x002e_document-details_x0023_default" quality="high" allowscriptaccess="sameDomain" allowfullscreen="true" wmode="transparent" flashvars="fileName=Minuta2.docx&paging=true&url=http%3A%2F%2Fintra.jaimeillanes.cl%2Fshare%2Fproxy%2Falfresco%2Fapi%2Fnode%2Fworkspace%2FSpacesStore%2F0a41947e-5054-4c6d-a861-caa7b0bb07e2%2Fcontent%2Fthumbnails%2Fwebpreview%3Fc%3Dforce%26lastModified%3Dwebpreview%253A1356554282043&jsCallback=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerEvent&jsLogger=Alfresco.util.ComponentManager.get('template_x002e_web-preview_x002e_document-details_x0023_default').plugin.onWebPreviewerLogging&i18n_actualSize=Tama%C3%B1o%20actual&i18n_fitPage=Adaptar%20a%20la%20p%C3%A1gina&i18n_fitWidth=Adaptar%20a%20lo%20ancho&i18n_fitHeight=Adaptar%20a%20lo%20alto&i18n_fullscreen=Pantalla%20completa&i18n_fullwindow=Maximizar&i18n_fullwindow_escape=Pulse%20la%20tecla%20Esc%20para%20salir%20del%20modo%20de%20pantalla%20completa&i18n_page=P%C3%A1gina&i18n_pageOf=de&show_fullscreen_button=true&show_fullwindow_button=true&disable_i18n_input_fix=false">
</div>
I've been searching but i can't find anything.
I think you need to search a bit 'deeper' in Alfresco.
Check the flash previewer freemarker template which is injected in the document-details template (xml). In that ftl or a reference to another one should be the div your referring to.
See https://issues.alfresco.com/jira/browse/ALF-16914, is that your issue?
You would be recommended to upgrade to the latest 4.2 version, where I believe it is fixed. Alternatively you could try removing the file tablet.css file which it seems triggers the problem (note this could have unintended side-effects, however!).

Categories