时间戳

首页 > 解决方案 > 如何在javascript中显示图像而不是url

javascript - 如何在javascript中显示图像而不是url

问题描述

当您单击他的名字时，我制作了这段代码以在弹出窗口中显示角色的图像。我的问题是它显示的是我的 api 中的 url 而不是图像，而且它总是在弹出窗口中显示，而不是下一个。

这是我的js：

function afficherConservation(id){
        let popup = document.getElementById("popup");
        let content = document.getElementById("content");
        let span = document.getElementsByClassName("close")[0];

        popup.style.display = "block";

        let paragraph = document.createElement('p');

        const title = document.createTextNode('Portrait : ');
        paragraph.appendChild(title);
        content.insertAdjacentElement('beforeend', paragraph, content);
        const sautLigne = document.createElement('br');
        paragraph.appendChild(sautLigne);
        content.insertAdjacentElement('beforeend', paragraph, content);

        const req = new XMLHttpRequest();
        req.open('GET', 'http://localhost/Fil_Rouge/api.php?id=' + portrait_id, true);

        req.onreadystatechange = ()=>{
            if(req.readyState === 4 && req.status === 200){
                const data = JSON.parse(req.responseText);
                paragraph;

                if(Object.keys(data).length !== 0){
                    const state = document.createTextNode(data[0].portrait_url);
                    paragraph.appendChild(state);
                    content.insertAdjacentElement('beforeend', paragraph, content );
                }
                else{
                    const noValueState = document.createTextNode("Non renseigné");
                    paragraph.appendChild(noValueState);
                    content.insertAdjacentElement('beforeend', paragraph, content);
                }
            }
        };
        req.send();

        //  When user clicks on span, close the modal
        span.onclick = ()=>{
            popup.style.display = "none";
            content.innerHTML='';
        }

        window.onclick = (event)=>{
            if(event.target == popup){
                popup.style.display = "none"
                content.innerHTML='';
            }
        }
    }

“id”是角色的id “portrait_url”是图片

有什么建议吗？我做错了什么 ？

标签： javascriptphpimagepopup

解决方案

谢谢，这是马库斯所说的元素！所以我改变了这个：

    if(Object.keys(data).length !== 0){
        const state = document.createTextNode(data[0].portrait_url);
             paragraph.appendChild(state);
                content.insertAdjacentElement('beforeend', paragraph, content );

对此：

   if(Object.keys(data).length !== 0){
       const state = document.Element('img');
            state.src = data[0].portrait_url;
                 content.insertAdjacentElement('beforeend', paragraph, 
                    content );

现在它完美地工作了！谢谢 ！

推荐阅读