Tengo una imagen que se pasa dentro de un div y que funciona como un botón que abre y cierra un componente. Me enfrento a un error en el que la imagen (flecha) no se carga en las aplicaciones de Android . Funciona 100% para la Web. Necesito que la imagen se cargue en la aplicación de Android y en la Web. defectuoso (aplicación de Android)

impecable (web)

Jsx:

 const [arrow, setArrow] = useState(isCollapsed); const [arrowStyle, setArrowStyle] = useState(); const handleArrowClick = () => { openHistoryTable(); setArrow(!isCollapsed); }; useEffect(() => { arrow ? setArrowStyle('expanded') : setArrowStyle('arrow'); }, [arrow]); <div onClick={() => handleArrowClick()} className={`${styles['arrow']} ${ styles[arrowStyle] }`} />

CSS:

 arrow { position: absolute; width: 12px; height: 20px; background-image: url(../icons/gray-arrow.svg); background-size: contain; background-repeat: no-repeat; transform: rotate(90deg); top: 27px; right: 40px; transition: all 0.2s ease; @include media-below($mobile-max) { right: 25px; } &:hover { cursor: pointer; } &.expanded { transform: rotateZ(270deg); } }