Tengo un componente de reacción que es un panel meteorológico. Estoy tratando de mostrar una imagen para el clima de hoy condicionalmente. Sería muy bueno si pudiera usar JSX en un atributo src. Aquí hay un ejemplo de lo que me gustaría hacer...
Importo mis imágenes meteorológicas en la parte superior de mi componente:
import rain from 'my image path' import sun from 'my image path'Este es un componente de reacción funcional. En mi componente que obtiene el clima de hoy y establece un valor de estado 'weatherToday' a 'lluvia', 'sol', etc. dependiendo del clima de hoy. Por ejemplo:
const [weatherToday, setweatherToday] = useState('rain');Ahora, en el HTML que devuelvo de mi componente, tengo una etiqueta img. En el atributo src de esa etiqueta img, ¿puedo usar JSX? No está claro si puedo o no, pero lo que he estado intentando hasta ahora no ha funcionado.
Aquí está mi intento de hacer esto hasta ahora.
<img src={ (() => { switch(weatherToday === 'rain') { case "rain": return rain; default: return sun; } }) } ></img>El resultado es un enlace de imagen roto. ¿Qué estoy haciendo incorrectamente?
Dentro de la función de su componente, debe declarar y manipular una variable como la siguiente (por supuesto, la declaración de cambio también se puede usar para lograr lo siguiente):
let weatherImg = ""; // and conditionally update it as required like below - if(weatherToday == rain) { weatherImg = "whatever image name you imported from image path" } else if (condition 2) { weatherImg = "path 2" } else if (condition 3) { weatherImg = "path 3" } else { weatherImg = "whatever default image you want to show" }Luego pasa el valor de la variable weatherImg al atributo src en la etiqueta de la imagen.
<img src={weatherImg}></img>Una ventaja de escribir de esta manera es que alguien que lea este código puede echarle un vistazo rápido, ya que estará en la parte superior de su código JSX y determinará las condiciones que están causando que la imagen cambie. Entonces, en el futuro, si se necesita algún cambio, es fácil de hacer, a diferencia del caso que ha mostrado que, francamente, no he probado y parece más difícil de leer y tiene errores, como se indica en la sección de comentarios.