How can I style an image component in Vue.js?

How can I style an image component in Vue.js?

You can style an image component in Vue.js using CSS classes or inline styles. Do you have a specific design in mind?

I want to make the image responsive and add a border.

To make the image responsive, you can set its width to 100% and height to auto. For the border, you can use CSS like this: border: 2px solid black;.

Can you show me an example of the code?

Sure! Here's a simple example:

<template>
  <img :src="imageSrc" class="responsive-image" />
</template>

<style>
.responsive-image {
  width: 100%;
  height: auto;
  border: 2px solid black;
}
</style>

What if I want to add a hover effect?

You can add a hover effect using the :hover pseudo-class in your CSS. For example:

.responsive-image:hover {
  transform: scale(1.05);
}