es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo mostrar iconos en menús desplegables (etiqueta de opción) en React en lugar de obtener [object Object]?

Cómo mostrar iconos en menús desplegables (etiqueta de opción) en React en lugar de obtener [object Object]?

28 Jul, 2023 Programación

Intenté hacerlo así en mi código para tener un menú desplegable con estos íconos.

<select name="orientation">
  <option value="all"><img src="https://img.icons8.com/material-outlined/24/000000/multiple-devices.png" /></option>
  <option value="landscape"><img src="https://img.icons8.com/material-outlined/24/000000/iphone--v2.png" /></option>
  <option value="portrait"><img src="https://img.icons8.com/material-outlined/24/000000/laptop.png" /></option>
  <option value="square"><img src="https://img.icons8.com/material-rounded/24/000000/name.png" /></option>
</select>

En lugar de eso, obtuve lo siguiente:

[object Object]
[object Object]
[object Object]
[object Object]

¿Qué se puede hacer para mostrar los íconos reales en el menú?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar íconos reales en el menú desplegable, debes usar la etiqueta HTML option en lugar de la etiqueta img. Puedes establecer el valor de la opción como el nombre o identificador del ícono, y luego usar CSS para agregar el ícono como una imagen de fondo en la opción. Aquí tienes un ejemplo:

    <select name="orientation">
  <option value="all" style="background-image: url(https://img.icons8.com/material-outlined/24/000000/multiple-devices.png)">Todo</option>
  <option value="landscape" style="background-image: url(https://img.icons8.com/material-outlined/24/000000/iphone--v2.png)">Horizontal</option>
  <option value="portrait" style="background-image: url(https://img.icons8.com/material-outlined/24/000000/laptop.png)">Vertical</option>
  <option value="square" style="background-image: url(https://img.icons8.com/material-rounded/24/000000/name.png)">Cuadrado</option>
</select>

    En este ejemplo, agregamos el atributo style a cada opción para establecer la propiedad background-image con la URL del ícono que deseamos. Puedes ajustar el tamaño y posición del ícono con propiedades CSS adicionales como background-size, background-position, y padding.

Comments are closed.