screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Use Image as Link</h3> <a :href="link" target="_blank"> <img :src="imageSrc" alt="Image Description"> </a> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { link: 'https://fontawesomeicons.com', imageSrc: 'https://www.sarkarinaukriexams.com/images/editor/1682083311vue_js_use_image_as_link.png' } } }) </script> <style scoped> #app { text-align: center; /* centers content horizontally */ margin: 50px; /* adds space around the element */ } h3 { font-size: 24px; /* sets the font size to 24 pixels */ } a { display: inline-block; /* makes the link a block element */ margin-top: 20px; /* adds space above the link */ border: 1px solid #ccc; /* adds a border to the link */ padding: 10px; /* adds padding inside the link */ border-radius: 5px; /* rounds the corners of the link */ text-decoration: none; /* removes underline from link */ } a:hover { background-color: #f7f7f7; /* adds a light gray background on hover */ } img { max-width: 100%; /* ensures the image does not exceed the container's width */ height: auto; /* maintains the image's aspect ratio */ } </style> </body> </html>