Necesito cargar un archivo de imagen y estoy tratando de escribir un código corto para obtener cualquier versión disponible (primero .svg y, si no está disponible, entonces .png), así que se me ocurrió este fragmento de React:
Disculpas de antemano por eliminar el formato del código y posiblemente otros errores de principiante
let serviceLogo = (typeof this.props.service != undefined || typeof this.props.service != "undefined" ) ? ( require( `./path/logo-` + this.props.service + `.svg`) != null ? require(`.path/logo-` + this.props.service + `.svg`) : require(`.path/logo-` + this.props.service + `.png` ) ) : "" ;que entonces solo se llamará aquí
<img src={serviceLogo} />
Funciona bien si el archivo es .svg . Pero me falta algo porque si la extensión del archivo de imagen es .png , aparece el error:
Uncaught Error: Cannot find module './logo-whateverfilename.svg'
¿Cómo puedo arreglar el código para que me proporcione un archivo PNG si no existe una versión SVG?
Da un error porque require está tratando de importar un archivo que no existe antes de verificar si ese archivo existe o no.
require( `./path/logo-` + this.props.service + `.svg`) != nullpuedes intentar encapsular tu código con try catch como este
let serviceLogo = ''; if (this.props.service) { try { serviceLogo = require( `./path/logo-` + this.props.service + `.svg`); } catch (error) { serviceLogo = require( `./path/logo-` + this.props.service + `.png`); } }