Tengo una carpeta que contiene una imagen de cada uno de los 50 estados. Algunos son PNG y otros son archivos JPG. El nombre de cada archivo es simplemente el nombre del estado y la extensión es PNG o JPG. "Alabama.jpg" "Connecticut.png" etc...
Una variable llamada stripState también es simplemente el nombre de cada estado que se correlaciona exactamente con los nombres de los archivos de imagen.
Puedo llamar y producir la imagen apropiada usando el siguiente código para los JPG:
stateImageDisplay.src = `state-pics-converted/${stripState.state}.jpg`;y lo siguiente para los archivos PNG:
stateImageDisplay.src = `state-pics-converted/${stripState.state}.png`;Esto funciona solo cuando se usa uno u otro. Todos los JPG se mostrarán correctamente o todos los PNG.
Sé que podría convertir todos los archivos dentro de la carpeta a JPG o PNG, pero me gustaría saber cómo usar JavaScript para elegir el archivo que esté disponible.
Quiero escribir un código que llame a cualquier archivo de imagen que coincida con "stripState"... ya sea JPG o PNG. Si "stripState" es "Kentucky", javaScript hace que "stateImageDisplay.src" sea igual a "Kentucky.jpg" o "Kentucky.png"... cualquiera que exista.
Pensé que tal vez podría usar una "declaración if" para verificar si se encuentra uno de los dos tipos de archivo. Si es así, use ese, si no, use el otro tipo. Como abajo:
if (`state-pics-converted/${stripState.state}.jpg` === undefined) { stateImageDisplay.src = `state-pics-converted/${stripState.state}.png`; } else { stateImageDisplay.src = `state-pics-converted/${stripState.state}.jpg`; }También intenté cambiar "indefinido" por "onerror" pero no tuve éxito.
El error de registro de la consola muestra el mensaje "net::ERR_FILE_NOT_FOUND" cuando la extensión de archivo "buscada" no está disponible. No sé cuál sería el equivalente a eso para usarlo en la declaración if ...
¿Alguna sugerencia? Gracias por adelantado
Si está trabajando dentro del navegador (y no con NodeJS), puede intentar cargar una imagen y usar un respaldo en un error de carga como ese
img.onerror = () => { img.src = 'picture.jpg' } img.src = 'picture.png'A continuación, deberá decidir cuál intentar cargar primero.
Creo que su enfoque es correcto, pero su lógica es incorrecta. Me gustaría abordar su pregunta brindándole una versión de su propia solución.
Primero quiero aclarar que esta solución es viable solo si estamos hablando de javascript del lado del servidor. No puede escribir código que acceda al sistema de archivos de la PC de otro usuario, por lo que el javascript del lado del cliente no funcionará así.
Tu escribiste:
if (`state-pics-converted/${stripState.state}.jpg` === undefined) { stateImageDisplay.src = `state-pics-converted/${stripState.state}.png`; } else { stateImageDisplay.src = `state-pics-converted/${stripState.state}.jpg`; }De hecho, está trabajando con valores de cadena y no con rutas reales del sistema de archivos, es decir, en su declaración condicional (si es un bloque). JavaScript está leyendo su código y dice "Está bien, él quiere que verifique si esta cadena (que está definida por defecto/verdadera ya que no está vacía) es igual a indefinida".
Siempre se definirá una cadena no vacía. Es por eso que verificar si state-pics-converted/${stripState.state}.jpg === undefined no funciona. Nuevamente, literalmente está verificando si una cadena no está definida.
Lo que debe hacer es acceder al sistema de archivos real, encontrar cualquier archivo que coincida con el nombre del estado y luego determinar si ese archivo es png o jpg. Una vez hecho esto, puede configurar stateImageDisplay.src en la ruta adecuada.
Esencialmente, debe explorar el directorio -> Buscar el estado que coincida con el nombre que desea -> verificar su tipo -> establecer su valor src como. la propiedad src de stateImageDisplay.
Lea aquí para obtener información sobre el uso del módulo del sistema de archivos tal como existe en NodeJs.
https://www.w3schools.com/nodejs/nodejs_filesystem.asp
Y luego vea esta pregunta Obtenga una lista de nombres de archivo en la carpeta con Javascript y desplácese hacia abajo y vea cómo las personas están leyendo el directorio.
Nuevamente, el objetivo es concentrarse en verificar el directorio en busca de cualquier archivo, independientemente de su extensión, que coincida con el nombre de su estado. Una vez que tenga una variable que haga referencia al archivo real, puede verificar su extensión. Una vez que haga eso, puede seguir el flujo de lógica en su condicional, pero trabajando con la variable de archivo en sí en lugar de cadenas.