It appears that there is a discrepancy in the coordinate systems used between your Python server's bounding boxes and the coordinate system utilized by the Q-img tag on your frontend.
To address this issue, ensure that the image dimensions provided by the server (imageData.width and imageData.height) align with the actual dimensions of the image displayed by the Q-img tag. Any resizing or scaling done on the client-side could potentially disrupt the coordinates.
In addition, verify whether the server yields bounding box coordinates based on the image dimensions (such as percentages) or in absolute pixels. Currently, your CSS styles are set to use absolute pixel values. If the server supplies absolute pixel coordinates and your div tag requires relative positioning, you will need to calculate the percentages:
left: ((box.x1 / imageData.width) * 100) + '%',
top: ((box.y1 / imageData.height) * 100) + '%',
width: ((box.x2 - box.x1) / imageData.width) * 100) + '%',
height: ((box.y2 - box.y1) / imageData.height) * 100) + '%'
Be sure to log both the bounding box coordinates received from the server and the computed styles of the div element in your browser's console using console.log. Compare the two sets of data to identify any discrepancies. Utilize your browser's developer tools to inspect the image and overlaying div, confirming if the div tag is positioned correctly and has the accurate dimensions. Further investigation may be required.
If assuming that your server returns coordinates as percentages ranging from 0.0 to 1.0, consider modifying the template as follows:
<q-img :src="imageData.src">
<div v-for="box in bboxes" :key="box.x1"
style="
position: absolute;
background-color: rgba(0, 100, 0, 0.1);
left: {{ box.x1 * 100 }}%;
top: {{ box.y1 * 100 }}%;
width: {{ (box.x2 - box.x1) * 100 }}%;
height: {{ (box.y2 - box.y1) * 100 }}%;
border: 0.5px solid blue;
"
>
</div>
</q-img>