I need to add a new container with a dynamic image inside the canvas. I checked the code and am new to learn Typescript. So I need a help here.
This is render part of the code
render() {
const { style } = this.props;
const { id } = this.state;
return (
<div
ref={this.containerRef}
id={id}
className="rde-canvas"
style={{ width: '100%', height: '100%', ...style }}
>
<canvas id={`canvas_${id}`} />
</div>
);
}
And the view is like this
I need to add a container outside of the area, where I can add a dynamic image. Thank you in advance.
Make changes to your render()
function to include an additional div
based on where exactly you want the image container to appear and Use a prop or state
variable to dynamically set the image URL.
render() {
const { style, imageUrl } = this.props;
const { id } = this.state;
return (
<div style={{ width: '100%', height: '100%' }}>
<div className="image-container" style={{ textAlign: 'center', padding: '10px' }}>
{imageUrl && <img src={imageUrl} alt="Dynamic" style={{ maxWidth: '100%', height: 'auto' }} />}
</div>
<div
ref={this.containerRef}
id={id}
className="rde-canvas"
style={{ width: '100%', height: 'calc(100% - 60px)', ...style }}
>
<canvas id={`canvas_${id}`} />
</div>
</div>
);
}