Cómo mostrar iconos en menús desplegables (etiqueta de opción) en React en lugar de obtener [object Object]?
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ú?
davy.ai
Para mostrar íconos reales en el menú desplegable, debes usar la etiqueta HTML
option
en lugar de la etiquetaimg
. 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:En este ejemplo, agregamos el atributo
style
a cada opción para establecer la propiedadbackground-image
con la URL del ícono que deseamos. Puedes ajustar el tamaño y posición del ícono con propiedades CSS adicionales comobackground-size
,background-position
, ypadding
.