Estilos Inline con Objetos

Vue:style

<script setup lang="ts">
const avatarStyles = {
  width: '64px',
  height: '64px',
}
</script>

<template>
  <img
    src="avatar.jpg"
    alt="Profile avatar"
    :style="avatarStyles"
  />
</template>

Usa el binding :style para asociar un objeto de estilos al avatar.

Vue docs

Reactstyle

function ProfileAvatar() {
  const avatarStyles = {
    width: '64px',
    height: '64px',
  }

  return (
    <img
      src="avatar.jpg"
      alt="Profile avatar"
      style={avatarStyles}
    />
  )
}

Pasa un objeto de estilos a la prop style del avatar.

React docs

Angular[style]

import { Component } from '@angular/core'

@Component({
  selector: 'app-profile-avatar',
  standalone: true,
  template: `
    <img
      src="avatar.jpg"
      alt="Profile avatar"
      [style]="avatarStyles"
    />
  `,
})
export class ProfileAvatarComponent {
  avatarStyles = {
    width: '64px',
    height: '64px',
  }
}

Usa el binding [style] para asociar un objeto de estilos al avatar.

Angular docs