• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

127
Vistas
Image doesn't show up with props in ReactJS

I have a local image and I want to put on my webpage with Props. I did src={require('../images/my-image.png')} but it didn't work. It only works with importing the image file, But I want it to be dynamic.

The resulting img element is this: enter image description here

App.js:

export default function App() {
  return (
      <div className="App">
        <Cards img="my-image.png" />
      </div>
  )
}

Cards.js:

export default function Card(props) {
  return (
    <div>
      <img src={`../images/${props.img}`} />
    </div>
  )
}

Totally, I can not put image file in src attribute in JSX, even something like this: <img src="../images/my-image.png" />

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

You should move your assets to the public folder instead of keeping them in the src folder. Also, you can use CDN for images if available.

Please refer to this link: React, load images local from json

My Working Code Link: https://codesandbox.io/s/zealous-borg-usgyqv

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Can you check the importAll work for you? Check the below link and confirm if this work for you.

Dynamically import images from a directory using webpack

At the end of importAll, you will have an array of all the images, and based on your requirement, you can pass the specified image as prop to Cards.js

almost 3 years ago · Juan Pablo Isaza Denunciar

0

This is very simple if you have a 'png' all you have to do is import the 'png' then pass it as a prop. Your mistake is trying to use a relative path:

This is not correct <img src={../images/${props.img}} />

This is the correct way : <img src={props.img}/>

If you want to load an SVG the best way is to convert it into a React component like this.

import React from 'react'

export default function 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>
)

}

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda