+ 2

How to create img ?

HTMl

4th May 2025, 2:08 AM

Umesh Sahu

7 odpowiedzi

+ 4

Umesh Sahu Try searching `Image help` in the search bar of Q/A forum, you will get many threads. Next time, try to avoid posting a similar question by just searching on the search bar of discussion forum.

4th May 2025, 3:40 AM

Gulshan Mahawar

+ 3

Umesh Sahu, this might help you:- https://sololearn.com/compiler-playground/Wy3lrXNwGsgJ/?ref=app

4th May 2025, 3:54 AM

Alhaaz

+ 2

Umesh Sahu use img element like this <body> <img src="imageUrlHere.com" alt="alt attribute is an alternative if image isn't available" title="this is optional it's just a text when the mouse hovers" /> </body> Hope it helps how to use image link here https://sololearn.com/compiler-playground/WpV31vHb6OmZ/?ref=app

5th May 2025, 4:53 PM

Mikhael

+ 1

Create image with img tag. Provide a link of the image in the src attribute which will be used to display the image: <img src="yoururl.com">

4th May 2025, 2:42 AM

Afnan Irtesum Chowdhury

Umesh Sahu ,by any chance, do you mean CREATING your own image using canvas or svg? HTML <canvas> helps you DRAW shapes or load external image onto the canvas using JS. <canvas id="myCanvas"></canvas>  const canvas = document.getElementById('myCanvas'); const rect = canvas.getContext('2d'); rect.fillStyle = 'red'; rect.fillRect(50, 50, 150, 100); // This creates a red rectangle // To draw external image const canvas = document.getElementById('myCanvas'); const ext = canvas.getContext('2d'); const img = new Image(); img.onload = function() { ext.drawImage(img, 0, 0,width, height); // draw at 0,0 and scale to fit canvas width and height respectively }; img.src = 'url'

4th May 2025, 6:58 AM

Ushasi Bhattacharya

You can use SVG (Scalable Vector Graphics) to create 2D circles(<circle>), rectangles(<rect>) and texts (<text>). Once nested inside the <svg> container : <circle cx=" " cy=" " r=" " fill=" "> creates a circle with r radius and (cx,cy) as center point on the svg canvas.It's similar to Cartesian plane, only difference is that cy extends DOWNWARD(not up)along y-axis because the TOP-LEFT of svg canvas is (0,0)while on the Cartesian plane it's the bottom-left. Fill attribute specifies the color. <rect x="" y="" width="" height="" fill=""> creates rectangle of the specified height,width &color. x and y respectively specify the x & y coordinates of the TOP-LEFT CORNER of rectangle. <text x="" y="" font-size="" fill="">YourText </text> displays a text of the specified color and font. x is HORIZONTAL position from LEFT-MARGIN of SVG. y is VERTICAL position from TOP-MARGIN to BASELINE of the text(not the top of the text box) [So y='0' makes text appear ABOVE the visible svg canvas area Note:<text>is CONTAINER TAG

4th May 2025, 7:23 AM

Ushasi Bhattacharya

<img(src)=``url``>

5th May 2025, 11:13 PM

samuel