Блог

я создал ограничивающую рамку, и у меня есть изображение, которое я хочу добавить к изображению. я много пробовал, но ничего не помогает. будьте добры, подскажите мне, как это сделать. я загрузил свой код здесь ниже

Код реакции:

 import React, { useRef, useEffect } from 'react';     import 'bootstrap/dist/css/bootstrap.min.css';    function App() {  const canvas = useRef();  let ctx = null;    // initialize the canvas context  useEffect(() =gt; {  // dynamically assign the width and height to canvas  const canvasEle = canvas.current;  canvasEle.width = canvasEle.clientWidth;  canvasEle.height = canvasEle.clientHeight;    // get context of the canvas  ctx = canvasEle.getContext("2d");  }, []);    useEffect(() =gt; {  const r1Info = { x: 20, y: 30, w: 150, h: 100 };  const r1Style = { borderColor: 'red', borderWidth: 10 };  drawRect(r1Info, r1Style);  const r4Info = { x: 100, y: 220, w: 100, h: 50 };  drawFillRect(r4Info);  }, []);    // draw rectangle  const drawRect = (info, style = {}) =gt; {  const { x, y, w, h } = info;  const { borderColor = 'black', borderWidth = 1 } = style;    ctx.beginPath();  ctx.strokeStyle = borderColor;  ctx.lineWidth = borderWidth;  ctx.rect(x, y, w, h);  ctx.stroke();  }          return (  lt;div className="App"gt;     lt;div id="box-search"gt;  lt;div class="thumbnail text-center"gt;  lt;img src="https://karthiknbucket1.s3.ap-southeast-1.amazonaws.com/cat.jpg" alt="" /gt;  lt;div class="caption"gt;  lt;canvas ref={canvas}gt;lt;/canvasgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;     lt;/divgt;    ); }   export default App;  

в настоящее время изображение и коробка, показанные отдельно, я хочу добавить ограничивающую рамку над изображением, пожалуйста, объясните мне, как это сделать, любая помощь будет очень признательна