I created a component in Sitecore Next Js React. The component is basically a full width banner. I need to set an image as the background of the parent dive and this should be editable through the experience editor.
How would I go about doing this in nextjs?
You can make it similarly to react or with Next component.
Place image to public folder and add path to image in background-image property
Import image and place import to background-image property like this:
backgroundImage: url(${bg.src})
Use next/image component. https://nextjs.org/docs/api-reference/next/image
This component make some optimization.
You should place image in src prop like 1 variant or just pass image import, add layout = fill, and position: relative to parent.
Official demo: https://image-component.nextjs.gallery/background
Docs: https://nextjs.org/docs/api-reference/next/image
Related
I am having a problem with the image src that I am trying to upload in my dApp. I have the height and width properties set but it still shows the following error:
Uncaught Error: Image with src "https://vivi-project.infura-ipfs.io/ipfs/Qmc5VkpgsRbiyxG1152WVfnHgZ4caqVLJDSrUPYhX9TdCP" must use "width" and "height" properties or "layout='fill'" property.
I have the properties set as:
`
<Image
src={fileUrl}
alt="Picture of the NFT"
className="rounded mt-4"
width={350}
height={500}
//blurDataURL="data:..." automatically provided
//placeholder="blur" // Optional blur-up while loading
/>
`
I have looked at solution:
NextjS Image issue with src and default external image URL
and looked at the Nextjs documentation
https://nextjs.org/docs/api-reference/next/image
Seems like you are using the legacynext image component instead of the next13 supported next/image component.
If you are using the legacy image component this is how you'd do it
import Image from "next/legacy/image";
You'd need the height and width property together or layout props to get it to work. Also, you'd need a wrapper for the image whose position is not static.
If you are using the Next 13 Image component i.e next/image this is how you'd import
import Image from "next/image";
This new component needs the height and width props unless it is a statically hosted image, in which case, you'd need to pass the layout props.
You can read all about it in the next 13 image docs or the next legacy image docs
Found the answer to be in my index.js file that wasn't posted in here. Make sure to check for the image src in there to have the width and height uncommented and set to appropriate sizing. Rookie mistake that was caught by icyJoseph on GitHub.
Answer to Image Src Issue
I have navbar
and I wrote the navbar in src/app.component.html
I am using router-link for the page to swap components
for every component I have a different background
if I am using background-image for a component it will not display in the whole page
only in the router-link that is under the navbar
what is the best method to do it?
I thought maybe I should an empty div and set it to display absolute and make the background-image width and height for fullscreen
Basic Solution:
Create an app.service
Create a BehaviourSubject in the service with the default bg image path as initial.
Subscribe to that BehaviorSubject value in the app.component and set the background-image path from this value, you can use the ngStyle directive for this.
ngOnInit of every single navigation component, fire its own bg image path via BehaviorSubject from the app.service.
Working stackblitz example
In my gwt-application i got a tree with a few images. These images can be copied by drag and drop to a panel. Now i want to make them resizable in this panel. when i test my css-code with a concrete image-path for "background-image", resize:both and background-size:cover works! My problem is, that i cannot set a concrete url to the css, becacuse the imagepath is dynamic.
when i delete background-image from css and set backgroundimage in my code, the surrounding container resizes, but the image not. Is it possible to set 'background-image' to the image that I choose during runtime? how can i solve that with css?
Thank you!!
You can set background image at any time in your code. For example:
myPanel.getElement().getStyle().setBackgroundImage("url(/myImage.jpg)");
To make it resizable, you need to apply the correct CSS to this panel. There are several CSS options for you to consider.
I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);
I would like to change the bacground image for the preloading bar in Flex, the one which appears before loading your application. This article describes the way in which you can change the background-color, but is there a way to add a background image (and keep the loading bar on top of that)?
I think this is what you're looking for: http://blogagic.com/14/the-blogagic-custom-flex-preloader
The Adibe Cookbook you're linking already contains what you need. For example this recipe answers your question: http://cookbooks.adobe.com/post_Display_your_company_logo_while_you_application_lo-12756.html
Set the backgroundImage style of the application:
Type: Object Format: File CSS Inheritance: no Theme: halo
Background image of a component. This can be an absolute or relative URL or class. You can set either the backgroundColor or the backgroundImage. The background image is displayed on top of the background color. The default value is undefined, meaning "not set".