Esta puede ser muy básica, pero por alguna razón solo la primera etiqueta carga la imagen, mientras que las otras dos no. Incluí la función 'requerir' como he visto en otros hilos, pero aún no tuve éxito. Mi caso de uso es cargar estas rutas desde una API que se ejecuta localmente y tiene referencias de URI a imágenes que también se almacenan localmente. Estas rutas están fuera del directorio del proyecto de mi aplicación de reacción. es decir:
<img src={path-var}>¿Alguna idea de cómo hacer que esto funcione?
import React from "react"; import logo from "../my-icon.jpg" class App extends React.Component { render(){ return ( <div> <img src={logo}/> # WORKS <img src={"/Users/my-user/repos/app/python-backend/images/my-icon.jpg"}/> # DOESN'T WORK <img src={require("/Users/my-user/repos/app/python-backend/images/my-icon.jpg")}/> # DOESN'T WORK </div> ) } } export default App;Parece que estás confundiendo dos cosas separadas aquí:
Cuando haces esto:
import logo from "../my-icon.jpg" // and later... <img src={logo}/> El valor src resultante en el HTML se habrá traducido a algo completamente diferente. El proceso de compilación de la aplicación sabe que my-icon.jpg debe incluirse en la salida de compilación empaquetada, y el valor src será una URL relativa a ese recurso resultante.
Pero cuando haces esto:
<img src={"/Users/my-user/repos/app/python-backend/images/my-icon.jpg"}/>El proceso de compilación no tiene nada que cambiar. Lo ha proporcionado con una cadena literal, que será la salida exacta en el HTML resultante.
Sin embargo, de acuerdo con el problema que ha observado, la cadena literal que proporciona aquí no es la URL relativa del archivo. La parte /Users de esto sugiere que es probable que se trate de una ruta del sistema de archivos en su unidad C:\ . El servidor web y el sistema de archivos son dos cosas completamente diferentes.
Si proporciona un valor de cadena como src , deberá ser una URL correcta para el archivo de imagen en la salida de compilación de la aplicación.
¿Cómo estás incluyendo ese archivo en tu aplicación? ¿Esta carpeta de images que contiene el archivo se incluye en su sitio web resultante? Si es así, /images/my-icon.jpg puede funcionar. Pero, en última instancia, si obtiene estos valores de cadena de los datos, tendrá que determinar cómo la aplicación web resultante puede hacer referencia a los archivos indicados por esos datos.