Entrar Ainda não tem acesso?
8
respostas

A imagem não aparece na inclusão de <td> Help?

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Eventos, Formulários e Criando Elementos e atividade Escutando eventos

por Lyse Pereira do Cabo de Miranda
| 146.3k xp | 86 posts

Criei um exercício semelhante ao da Aparecida Nutricionista. No entanto, na minha

devem aparecer as imagens dos ícones de alterar, duplicar e excluir. Eu criei as imagens, formatei tudo no CSS. No Js, criei a tr e as tds como no exemplo abaixo. No entanto, quando eu incluo um cliente, as imagens não aparecem. No conteúdo da td fica aparecendo o texto '', ao invés da imagem. Como eu faço para anexar a imagem do erro aqui? Por favor, me mostre o que está errado no código? Muito obrigada

function montaTr(cliente) {
    var clienteTr = document.createElement("tr");
    // Adicionou uma classe à tr
    clienteTr.classList.add("cliente");

    clienteTr.appendChild(montaTd(pegaSequencial(), "info-codigo"));
    clienteTr.appendChild(montaTd(cliente.nome, "info-nome"));
    clienteTr.appendChild(montaTd(cliente.telefone, "info-telefone"));
    clienteTr.appendChild(montaTd('<img src="img/alterar18.png"></img>','a'));
    clienteTr.appendChild(montaTd('<img src="img/duplicar18.png"></img>','d'));
    clienteTr.appendChild(montaTd('<img src="img/excluir18.png"></img>','e'));

    return clienteTr;

O html que deveria ter sido criado dinamicamente é este, abaixo:

                    <tr class="cliente">
                        <td class="info-codigo">2</td>
                        <td class="info-nome">Luana</td>
                        <td class="info-telefone">(84) 95454-1000</td>
                        <td class="a"><img src="img/alterar18.png"></td>
                        <td class="d"><img src="img/duplicar18.png"></td>
                        <td class="e"><img src="img/excluir18.png"></td>
                    </tr>
8 respostas
por Estudante
| 589.2k xp | 188 posts

Lyse,

você pode colocar uma imagem em um site como o https://imgbb.com/

O mais provável é que você esteja indicando o caminho errado para as imagens. Dentro da pasta que está o seu código deve existir a pasta "img" e dentro dela as imagens. Se a estrutura está diferente então tem que ajustar.

Para facilitar você pode colocar seu código no github. Se não souber como tem um curso da Alura sobre: https://cursos.alura.com.br/course/git

por Lyse Pereira do Cabo de Miranda
| 146.3k xp | 86 posts

Olá Cristiano. As imagens estão na pasta correta. Elas aparecem nas outras linhas da tabela. Só não aparecem na linha que foi criada dinamicamente. Ao invés da imagem, aparece o código na tabela. Eu gostaria de poder anexar a imagem do erro aqui, mas não vejo como subir uma imagem nesse fórum.

por Estudante
| 589.2k xp | 188 posts

Oi Lyse.

Esse símbolo significa que a imagem não foi encontrada a partir do caminho especificado.

Se você colocar seu projeto no github fica mais fácil de ajudar.

Você também pode experimentar colocar as imagens em algum site e fazer a referência a elas. Assim você valida seu código e já pode ter uma ideia de onde está o erro.

Ou pode usar o caminho completo da sua imagem. Algo como <img src="file:///C:/alura2/img/525039.jpg">.

por Lyse Pereira do Cabo de Miranda
| 146.3k xp | 86 posts

Olá Cristiano, e todos. Não aparece este símbolo, não. O que aparece é o texto: img src="img/alterar18.png. Veja o que acontece no link abaixo. https://ibb.co/1R6wcNz

Ainda não consegui resolver o erro. :(

por Lyse Pereira do Cabo de Miranda
| 146.3k xp | 86 posts

Nas outras linhas as imagens aparecem corretamente. Só não aparece no html montado dinamicamente dentro do Javascript.

por Estudante
| 589.2k xp | 188 posts

Lyse,

agora entendi.

Isso deve resolver o problema:

function montaTr(cliente) {
    var clienteTr = document.createElement("tr");
    // Adicionou uma classe à tr
    clienteTr.classList.add("cliente");

    clienteTr.appendChild(montaTd(pegaSequencial(), "info-codigo"));
    clienteTr.appendChild(montaTd(cliente.nome, "info-nome"));
    clienteTr.appendChild(montaTd(cliente.telefone, "info-telefone"));
    clienteTr.appendChild(montaTd('<img src="img/alterar18.png"></img>','a'));
    clienteTr.appendChild(montaTd('<img src="img/duplicar18.png"></img>','d'));

    var xx = document.createElement("IMG");
    xx.setAttribute("src", "img/excluir18.png");
    xx.setAttribute("width", "16");
    xx.setAttribute("height", "16");
    xx.setAttribute("alt", "Exclusao");
    clienteTr.appendChild(montaTd("","e")).appendChild(xx);

    return clienteTr;
}

Fiz só a exclusão. Os outros são iguais.

A ideia é que você está incluindo uma TAG, então tem que fazer via appendChild, caso contrário vai ser entendido como uma string.

por Estudante
| 589.2k xp | 188 posts

Oi Lyse,

O código era o que você queria?

por Lyse Pereira do Cabo de Miranda
| 146.3k xp | 86 posts

Olá Cristiano. Precisei interromper este exercício que criei, porque tenho um deadline pra terminar o curso. Assim que eu conseguir voltar a ele, vou testar a sugestão que você me enviou. Muito obrigada, desde já