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
Related
Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to come from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as unused JS in the report?
Iframe API: https://developers.google.com/youtube/iframe_api_reference
Large file that gets flagged on PageSpeedInsights as unused JS:
https://www.youtube.com/s/player/c88a8657/player_ias.vflset/en_US/base.js
If a script is listed under the "Remove Unused Javascript" tab, it doesn't mean the entire script is unused, it means a certain amount of the script's code isn't doing anything on the page.
The algorithm for finding unused code isn't perfect either, I often see scripts that aren't used at all on a page having some sort amount of used code according to google.
The "Remove Unused Javascript" should really be taken with a pinch of salt, and in cases of plugins, like youtube's API, it should be ignored since you can't edit a external API to be more efficient.
In your case, the file is very much needed if your using an embedded Youtube video.
If you want to optmize how you load your Youtube video, consider lazyloading it.
If you want to fix it with just HTML you can setup the embed to load when the video clicked using the srcdoc attribute.
You basically write an HTML link inside the attribute and the video won't load until the link inside srcdoc is clicked.
Here's an example:
<!-- Reference: https://vumbnail.com/examples/srcdoc-iframe-for-lighthouse -->
<iframe
srcdoc="
<style>
body, .full {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
display: flex;
justify-content: center;
object-fit: cover;
}
</style>
<a
href='https://www.youtube.com/embed/Q-X_ED4LHrQ?autoplay=1'
class='full'
>
<img
src='https://vumbnail.com/Q-X_ED4LHrQ.jpg'
class='full'
/>
<svg
version='1.1'
viewBox='0 0 68 48'
width='68px'
style='position: relative;'
>
<path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
<path d='M 45,24 27,14 27,34' fill='#fff'></path>
</svg>
</a>
"
style="max-width: 640px; width: 100%; aspect-ratio: 16/9;"
frameborder="0"
></iframe>
It can be a bit clunky to write HTML inside an attribute but it gets the job done.
If you don't want to have to go in and replace all the YouTube IDs I wrote a simple builder here: https://vumbnail.com/embed-builder
I have been looking for 2 days to find a way to download YouTube videos, and I found out that this file is really important, because it loads all video/audio files:
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
I have an HTML file that will be portable to distribute to clients. It has an index of documents. I want a PDF or Word icon for each document but I don't want to repeat the base64 string 30 times if I can avoid it. How should I do this? Javascript is okay, but my goals are simplicity and portability.
Try using CSS class
img.word-icon {
content: url(data:image/gif;base64,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);
width: 32px;
height: 32px;
}
<html>
<body>
<img class="word-icon">foo
<img class="word-icon">bar
<img class="word-icon">
</body>
</html>
The other answer using CSS gives the right idea, but it is not compatible with all browsers. The content property of the CSS is only allowed in the pseudo-elements ::before and ::after. The img tag with a class with a content property is empty. The browsers have no obligation to display it. Chrome displays it nevertheless (incorrectly).
To make this work for all browsers, use for example the ::before on an empty span:
span.word-icon::before {
content: url(data:image/gif;base64,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);
}
<html>
<body>
<p><span class="word-icon"></span>Paragraph with icon.</p>
</body>
</html>
You can also attach it directly to p::before.
You can use a CSS variable.
In the <head> section of the page, name and define the variable and a class to use it:
:root {
--img-123: url(data:null;base64,iVBORw………); /* your image data here */
}
.img-123 {
background-blend-mode: normal;
background-clip: content-box;
background-position: 50% 50%;
background-color: rgba(0,0,0,0);
background-image:var(--img-123);
background-size: 100% 100%;
background-origin: content-box;
background-repeat: no-repeat;
}
In the <body> section of the page, use the image repeatedly via element style section or CSS classes. The SVG data creates a transparent image through which to see the content.
<img
class="img-123"
src="data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect fill-opacity="0"/></svg>"
>
I observed this technique in the output of the open source Firefox / Chrome extension SingleFile. There might be ways to simplify the CSS and to avoid using SVG.
create a script to insert it into the images. I purposely put the script code inline since you're sending a single HTML file:
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<script>
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++){
images[i].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADmklEQVRYhc2VSWgTURjHgycFPVsEtQdRXE96UFDxZHtRXFDRClrxICoIIl7EhWo9eFDEi+jFBRFxqRUFccEusY11abSKjSa2WZqmbZaZzGRt+/d9r5nxzSSpk9iCD34Mb/Le/P7vmy+Jzfafj6l+vx+Ez+fT0e4FAgH09fUhGAyiv7+fEwqFMDAwgMHBQY7T6VzPnjOl3AAVotzr9eoBSG4OQHIxwNDQELq7u4lzRQ3RShsmAwpEAXp6enhQj8dzpmCAMFssr5g5odAzqVIUgK7xeJxXjVXwdF6A0FwbzGRZWZOtLYgcOzI2D/Yh9dmJcG0Nnw+zMqe+OKE8fpS3V4NOHg6HeYBUKgVJkngl2H1jJYJssZm0x43Q5mok3znG5r88CK5cAvX1yz/zAvtEtABut1vvIbrncrnoeldvTP8cG8xkWRMpTW8QOrCfz0lI19TPH2Ofs9ImqSKXL+bt1SBZJBJBNBpFLBbjUBVkWeYw9XQeoJctNpNiFTDMWQDfupVQP37Q54X2GejtLSqnnmDqWTyAe7YNZhLfvhrmadYDSucneGu28Xmy+3veHjP0lS0mVxSFAlTyAC62eDKgd15MbgjwnS2eDOhrV0iuqipHD8DGbMb8Iqxrbm5GU1OTTktLC6e1tRV2ux1tbW1ob2/nOBwOdHR0oKuri/8iamKzPJFIGAJMY8wowmJqJjP0fjUK/UeQnBpQLLkoTyaThgDjjUp6kBmtuQj51VPED22HfP2SodyFTq3JSwogysSu1ohfqYfs+gZ5d7VBXExOv4qE5QCiTGwq/bQNdxB/cBvyvi3jijV5Op3mWA6QJ8ydUj9tMABp7ULEr14cVyzKM5mM9QAGWe6EIiSU1iyC2vnBkpjIZrPWA5hlIiRTO99D2rAa8uljlsTE8PCw9QBmoQjJ5JNHody8BrXxPpR7t/8qJkZGRqwHMJfVQMCHyPJ5SLx3QLlxDbH9NYju2Aj5Qj2ks6cgn6/LExOjo6PWA5jLqqG+eIZo9WrE9m6D+vwpMqrCT6s2PoR04jiUO7cwsHSBQU5igoblAGJJiZTfC+lgLeIX6hBetQxpWTKUmZ+YQr+1I+PtNYg1eUkBtPeoEavdyUNENlUhaW/Oe7/mUotScVgOIJ6MiB09jOiurUg8aRhXWkxccgBRUkhYirSsAKKokLAUaVkBzLJyhWUHmBDbPwSoYFQx9kwwVbln/3VMzS2snGAqcs+2/QZXZB6MU7ZPlQAAAABJRU5ErkJggg==";
}
</script>
<img onmouseover="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
Its not working. It comes up as a box, not a broken image but a box which doesn't display the image. I'm adding it to my website, could i be putting it in the wrong place? Also, i put it in my forum wrapper and i want the image to be displayed and when you hover your mouse over it so it changes to image 2 please help.
If you intend the image to change on mouseover, you can use this:
<img onmouseover="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png'"
onmouseout="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png'"
src="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
this.src='something'
will set the image src to something.
However, it would be prettier to use CSS and have it as background image, then it will work without javascript.
Please use some CSS, that inline style code gets so confusing.
If you want to do it the nice way do something like this:
#facebook {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png") no-repeat;
width: 231px;
height: 231px;
margin-top: -12px;
margin-right: -60px;
}
#facebook:hover {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png") no-repeat;
}
<div id="facebook"></div>
This may not be right but from looking at your code your img script doesnt end.
You need to have />
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!).