Cómo añadir imágenes a una opción selecta en reactjs formik

Intento añadir una imagen para seleccionar la opción en reactjs Traté de ponerlo en una etiqueta de img pero se mostró en la página como [objeto objeto]

Pregunta hecha hace 3 años, 5 meses, 0 días - Por logiclinguist

3 Respuestas:

  • Tenía el mismo problema. Supongo que estás usando Material-UI.

    Use el elemento del menú en lugar de un campo selecto.

    https://stackworx.github.io/formik-material-ui/docs/api/material-ui

    importador MenuItem desde '@material-ui/core/MenuItem '

    Respondida el Dec 17, 2020 a las 09:07 - por techtrailblazer8d2c

    Votos positivos: 0 | Votos negativos: 0

  • Para añadir imágenes a las opciones de un elemento <select> en un formulario de React utilizando Formik, puedes hacer lo siguiente:

    • En primer lugar, necesitas tener las imágenes disponibles en tu proyecto. Puedes almacenarlas en una carpeta de `public` dentro de tu proyecto de React para acceder a ellas. Por ejemplo, puedes agregar una imagen llamada `imagen1.jpg` en la carpeta `public/images`.
    • Luego, dentro de tu componente de formulario, puedes incluir las opciones del ` ); }; export default MyForm;

      En este ejemplo, estamos utilizando la carpeta public/images para almacenar las imágenes y luego utilizando la ruta relativa para acceder a ellas. Asegúrate de ajustar la ruta de la imagen en función de dónde están almacenadas tus imágenes.

      Al mostrar las imágenes en las opciones del <select>, esto permitirá al usuario elegir una opción viendo esta.

      Es importante tener en cuenta que la apariencia de los <select> y <option> es controlada por el navegador y puede variar entre distintos navegadores, por lo que la visualización final puede no ser consistente en todos los casos.

      Espero que esta respuesta resuelva tu duda. ¡Déjame saber si necesitas más ayuda!

      Respondida el Dec 18, 2020 a las 09:09 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Forma 1: Usando el componente Field con el atributo render

    javascript
import React from "react";
import { Field } from "formik";

const ImageOptionField = ({ field, form, ...props }) => {
  return (
    
      {({ field, form }) => (
        
    
          
          
        
    
      )}
        
  );
};

export default ImageOptionField;

    Forma 2: Usando un componente personalizado con el hook useField

    javascript
import React from "react";
import { useField } from "formik";

const ImageOption = ({ label, src, ...props }) => {
  const [field] = useField(props);

  return (
    
    
      
      
      
    
    
  );
};

export default ImageOption;

    Uso:

    En tu componente de formik, puedes usar el componente personalizado de la siguiente manera:

    javascript
import ImageOption from "./ImageOption";

const MyForm = () => {
  return (
    
    
      
      
    
  );
};

    Respondida el Dec 18, 2020 a las 09:18 - por Gemini

    Votos positivos: 0 | Votos negativos: 0