[Dúvida] Dúvida no código / Já consegui resolver

Oi, eu estou com um probleminha aqui no meu código. Quando ele é executado, a frase, o título e o nome do personagem aparecem, mas a imagem não.

Vou mandar aqui o meu html, css e js:

<main>

    <section class="principal">

        <h1 class="titulo"><strong>Frases marcantes nos jogos</strong></h1>

        <div class="imagem-texto">
            <div>
                <img id="imagem-frase" class="imagem-formato" src="" alt="Imagem do Jogo">
            </div>
            <div class="imagem-nome-titulo">
                <p id="titulo" class="texto"></p>
                <p id="personagem" class="texto"></p>
            </div>
        </div>
        <div class="imagem-frase">
            <div>
                <p id="frase"></p>
            </div>
            <div>
                <button class="botao">Gerar outra frase</button>
            </div>
        </div>

    </section>

</main>
<script type="module" src="script.js"></script>

Style.css:

body{
    background-color: black;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Manrope', sans-serif;
    color: white;
}

getDados.js:

const baseURL = 'http://localhost:8081';
export default function(endpoint){
    return fetch(`${baseURL}${endpoint}`)
        .then(response => response.json())
        .catch(error => {
            console.error('Erro ao acessar o endpoint /jogos/frases', error);
        });
}

script.js:

import getDados from "./getDados.js";

const btnSortear = document.querySelector('.botao');
const tituloElemento = document.getElementById('titulo');
const personagemElemento = document.getElementById('personagem');
const fraseElemento = document.getElementById('frase');
const imagemElemento = document.getElementById('imagem-frase');  

function carregarInfoJogos() {
 getDados(`/jogos/frases`) 
        .then(data => {
            console.log(data);
            tituloElemento.innerHTML = `${data.titulo}`;
            personagemElemento.innerHTML = `${data.personagem}`      
            imagemElemento.src = `${data.imagem}`
            fraseElemento.innerHTML = `${data.frase}`;

        })
        .catch(error => {
            console.error('Erro ao obter informações do jogo:', error);
        });
}

window.onload = function() {
    carregarInfoJogos();  
}; 
btnSortear.addEventListener('click', carregarInfoJogos);  

Classe Frase:

Classe frase DTO

public record FraseDTO(
       String titulo,
       String personagem,
       String post,
       String frase) {}

Classe serviço:

@Service
public class FraseService {
    @Autowired
    private Repository repositorio;

    public FraseDTO obterFrase(){
        Frase frase =repositorio.findRandomFrase();
        return new FraseDTO(frase.getTitulo(), frase.getPersonagem(),
                frase.getPost(), frase.getFrase());

    }
}

No banco eu inseri isso:

insert into frase_marcante(id, frase, personagem, post, titulo)
values
(1, 'Bem-vinda ao mundo real. É uma droga. Você vai amar', 'Monica', 'https://m.media-amazon.com/images/M/MV5BNDVkYjU0MzctMWRmZi00NTkxLTgwZWEtOWVhYjZlYjllYmU4XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300.jpg', ' Friends' )