screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h3>Vue Js Change Src from Input Field</h3> <input type="text" v-model="imageUrl" @keyup.enter="updateImage" placeholder="Enter image URL"> <img :src="imageUrl" alt="image" v-if="imageUrl"> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { imageUrl: 'https://www.sarkarinaukriexams.com/images/post/1684087085fantasy-gefbff9628_640.jpg' } }, methods: { updateImage() { // Check if the entered URL is valid let img = new Image(); img.src = this.imageUrl; img.onload = () => { // URL is valid, update the image source this.$refs.image.src = this.imageUrl; } img.onerror = () => { // URL is invalid, show an error message alert('Invalid image URL'); } } } }); </script> <style scoped> /* Input field */ input[type="text"] { font-size: 1rem; padding: 0.75rem 1rem; border: 2px solid #ddd; border-radius: 0.5rem; outline: none; transition: border-color 0.2s ease-in-out; width: 100%; margin-bottom: 1rem; } /* Input field on focus */ input[type="text"]:focus { border-color: #0088cc; } /* Image */ img { display: block; max-width: 100%; height: auto; margin-top: 1rem; border-radius: 0.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); } </style> </body> </html>