0
125
ViewsLa imagen no aparece con accesorios en ReactJS
Tengo una imagen local y quiero ponerla en mi página web con Props . Hice src={require('../images/my-image.png')} pero no funcionó. Solo funciona con la importación del archivo de imagen, pero quiero que sea dinámico.
El elemento img resultante es este: 
Aplicación.js:
export default function App() { return ( <div className="App"> <Cards img="my-image.png" /> </div> ) }Tarjetas.js:
export default function Card(props) { return ( <div> <img src={`../images/${props.img}`} /> </div> ) } Totalmente, no puedo poner el archivo de imagen en el atributo src en JSX, incluso algo como esto: <img src="../images/my-image.png" />
3 answers
Answer question0
Debe mover sus activos a la carpeta pública en lugar de mantenerlos en la carpeta src. Además, puede usar CDN para imágenes si está disponible.
Consulte este enlace: Reaccionar, cargar imágenes locales desde json
Enlace de mi código de trabajo: https://codesandbox.io/s/zealous-borg-usgyqv
0
¿Puede comprobar el trabajo de importAll para usted? Verifique el siguiente enlace y confirme si esto funciona para usted.
Importe imágenes dinámicamente desde un directorio usando webpack
Al final de importAll, tendrá una matriz de todas las imágenes y, según sus requisitos, puede pasar la imagen especificada como accesorio a Cards.js
0
Esto es muy simple si tiene un 'png', todo lo que tiene que hacer es importar el 'png' y luego pasarlo como accesorio. Tu error es intentar usar una ruta relativa:
Esto no es correcto <img src={ ../images/${props.img} } />
Esta es la forma correcta: <img src={props.img}/>
Si desea cargar un SVG, la mejor manera es convertirlo en un componente React como este.
importar reaccionar desde 'reaccionar'
función predeterminada de exportación MySVG() {
return ( <svg className="leftArrowSvg" width="6px" height="10px" viewBox="0 0 6 10" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g id="Version-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round"> <g id="Replay-Meeting---Key-Word-Tag" transform="translate(-37.000000, -40.000000)" stroke="#ffffff" strokeWidth="2"> <g id="Header" transform="translate(0.000000, 24.000000)"> <g id="Back-Button" transform="translate(38.000000, 8.000000)"> <polyline id="Arrow" transform="translate(2.000000, 13.000000) rotate(-360.000000) translate(-2.000000, -13.000000) " points="4 9 0 13 4 17"> </polyline> </g> </g> </g> </g> </svg> )}