JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Image</title>
</head>
<body>

    <input type="text" id="imageUrlInput" placeholder="Enter Image URL">
    <button onclick="changeImage()">Change Image</button>
    <br>
    <img id="displayedImage" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-B5INe0JWzheW2a8ZUN8SYTtW/user-8FfJtsMhgBWnV0AtiPfWNVjZ/img-ABzubPFzBy26EAXQuTuTJy1Z.png?st=2023-12-29T03%3A34%3A31Z&se=2023-12-29T05%3A34%3A31Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-12-28T18%3A07%3A51Z&ske=2023-12-29T18%3A07%3A51Z&sks=b&skv=2021-08-06&sig=OlDdYIFV/TrJZV0DXBy6rkzNQFmyhcr1nu6B52m/PPY%3D">

    <script>
        function changeImage() {
            // Get the input field value
            const imageUrl = document.getElementById("imageUrlInput").value;

            // Set the source of the displayed image to the input URL
            document.getElementById("displayedImage").src = imageUrl;
        }
    </script>

</body>
</html>