Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como carregar imagem dentro do jsx

Oi, estou tentando carregar uma imagem na minha aplicação mas não estou conseguido. Minha estrutura de pastas esta da seguinte forma:

src > assets > imagem > blackbook.png

import React, { Component } from "react";
import "./style.css"
import BlackBook from "./assets/images/blackbook.png"

class BookCard extends Component {
  render() {
    return (
      <section>
        <a href="https://www.youtube.com" target="_blank" rel="noreferrer">
          <img src="{BlackBook}" alt="LIVRO 1" />
        </a>
        <p>Livro 1</p>
        <p>Media %%</p>
      </section>
    );
  }
}

export default BookCard;
4 respostas

Oi Marilia, você usou aspas no src, então o {BlackBook} virou uma string. Tire as aspas que deve funcionar.

<img src={BlackBook} alt="LIVRO 1" />

Oi Luis, acho meu erro esta no caminho import da imagem. Minha estrutura de pastas esta da seguinte forma

src > assets > images > blackbook.png (aqui esta a imagem que eu quero usar)

src > components > BookCard > BookCard.jsx (aqui é o arquivo aonde eu estou tentando chamar a imagem)

solução!

Marilia, tudo bem?

Para importar sua imagem corretamente é necessário ter atenção em 2 pontos:

  • O import correto seria:
 import BlackBook from "../../assets/images/blackbook.png"
  • No source você deve remover as aspas em volta das chaves, assim como mencionou o Luis
<img src={BlackBook} alt="LIVRO 1" />

Espero que tenha ajudado!

Aeeew agora sim!!! valeu