Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

155
Vistas
How to display image from src/images without using import at the top and without using public directory in react/reactjs

I want to render the star1.png located in src/images/ directory without using import at the top and without using the public directory.

My code:

import React from "react"
import ReactDOM from "react-dom"

class App extends React.Component
{
    render(){
        let starIcon = "./images/star1.png"

        return(
            <>
                <h1>Hello</h1>
                <img src={starIcon} />
            </>
        )
    }
}

ReactDOM.render(<App />, document.getElementById("root"))
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

I'm not sure if I understand your question fully, but you could pass the image as a blob through props and set that blob as the source of the image.

about 4 years ago · Juan Pablo Isaza Denunciar

0

The problem is related to the prod build I think because when you created a build asset directory will not copy.

Solutions:

  1. You can import it'll be added to the bundle it'll work
  2. You can move to the public it'll also be added in the build/dist directory
  3. You can manually/automatically copy assets to the build/dist directory.

The last solution you are looking I think.

about 4 years ago · Juan Pablo Isaza Denunciar

0

I found the answer to my question which is using require:

let starIcon = require("./images/star1.png")
about 4 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 Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda