图片标签不接受 src答案

【问题标题】：Image tag won't accept src图片标签不接受 src
【发布时间】：2015-03-06 00:30:38
【问题描述】：

在使用 JavaScript 创建图像标记（和相关的单选按钮）之后，我试图让图像将值作为源。我从测试和警报输出中发现了以下内容：

如果图像 src 在创建图像标签时使用精确的文件路径提供，它将正确显示图像（例如 src='images/0.jpg'）。但是，这没有帮助，因为我需要它来处理任何给定的图像，而不是特定的图像。
如果图像 src 在创建图像标签时使用包含文件路径的变量提供，则根本无法生成图像标签或单选按钮（例如 src='" + result + '" )。

注意：下面的代码中没有最后一个示例。结果是通过将“$.post”部分移动到 for 循环中“out +=”行正下方的行来找到的。

如果图像 src 在创建图像标记时留空，则会创建图像标记和单选按钮，尽管图像如预期的那样是空白的。如果我在此之后尝试使用 'getElementByID(imgID).src' 来更改图像源，它将无法执行任何操作。（这里的“imgID”是一个例子，不是代码所说的）。

除此之外，使用警报和将信息转储到 div 表明正确发布了漫画 ID，并且肯定找到了图像 src 的文件路径，并且正在正确复制到变量“结果”中，甚至在创建标签或尝试使用“getElementById”对其进行编辑之前的一行。

此时我被难住了，我不知道逻辑上是什么阻止了 src 的读取。

Javascript：

<script>
// Loads the user's comic list from the database.
        function loadComic()
        {
        var xmlhttp = new XMLHttpRequest();
        var getID = '<?php echo $_SESSION["userID"]; ?>';
        var url = "loadCom.php?userID="+getID;


        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                loadComicJSON(xmlhttp.responseText);
            }
        }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();

        }

        // JSON parsing for 'loadComic'.
        function loadComicJSON(response)
        {
            var arr = JSON.parse(response);
            var i;
            var out = "";

            document.getElementById("loadList").innerHTML="";

            if (arr.length == 0)
            {
                //Irrelevant manipulation of HTML.
            }
            else
            {   
                out+="<br>";

                for(i = 0; i < arr.length; i++)
                {
                    out += "<hr><br><img name = '" + ('cm' + arr[i].comicID) + "' id='" + ('com' + arr[i].comicID) + "' onclick='resizeThumb(this)' height='100px;' src='' ><input name='comicList' type='radio' id='" + arr[i].comicID + "' value='" + arr[i].comicID + "'>" + arr[i].comicName + " </option><br><br>";                        
                }


                document.getElementById("loadList").innerHTML=out;
                for(j=0; j< arr.length; j++)
                {
                    tempID = (arr[j].comicID);
                    $.post("getCover.php", {comicID:tempID}, function(result)
                    {
                        document.getElementById("loadList").innerHTML+="<p>"+result+"</p>";
                        document.getElementById("com"+arr[j].comicID).src = result;
                    }
                    );

                }

            }

        }

    </script>

PHP (getCover.php)：

<?php
if (isset($_POST["comicID"]))
{
    include_once('includes/conn.inc.php');
    $checkID = $_POST["comicID"];

    $query = ("SELECT pageLocation FROM page WHERE comicID = '$checkID' ORDER BY pageNum");
    $result = mysqli_query($conn, $query);
    $row = mysqli_fetch_assoc($result);
    print_r($row["pageLocation"]);
}
else
{   
    $checkID = null;
    echo "Error. No comic found.";
}

?>

据我所知，loadList.php 运行良好，因此我没有列出其代码以保持相关性。

【问题讨论】：

你有没有机会转储一个comicID是什么的例子？只是为了确保没有像"'images/0.jpg'"这样的意外字符
comicID 一般为整数。在测试中，我一直在执行两个 ComicID 是“100”和“101”。这扩展到包含文件（或“页面”）的“漫画”的文件夹名称，因此文件结构的示例为：“comics/100/0.jpg”其中 100 是漫画的 id，0.jpg是文件。
你从哪里得到imgSrc？
抱歉，imgSrc 是以前代码的剩余部分，直到我意识到我可以直接使用'result'并且'imgSrc = result'是浪费时间。我将编辑问题以将其删除。
为什么你使用 XHR 发出 AJAX 请求，而 jQuery 发出POST？

标签： javascript php jquery ajax image

【解决方案1】：

我复制了您的代码并对其进行了一些调整，这样我就可以在没有 Web 服务的情况下运行它，而且效果很好。这是我创建的 HTML 页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<script>

    // JSON parsing for 'loadComic'.
    function loadComicJSON()
    {
        var arr = [{comicID: 1},{comicID: 2},{comicID: 3}];
        var result = "monkey.jpeg";
        var i;
        var out = "";

        document.getElementById("loadList").innerHTML="";

        if (arr.length == 0)
        {
            //Irrelevant manipulation of HTML.
        }
        else
        {
            out+="<br>";

            for(i = 0; i < arr.length; i++)
            {
                out += "<hr><br><img name = '" + ('cm' + arr[i].comicID) + "' id='" + ('com' + arr[i].comicID) + "' onclick='resizeThumb(this)' height='100px;' src='' ><input name='comicList' type='radio' id='" + arr[i].comicID + "' value='" + arr[i].comicID + "'>" + arr[i].comicName + " </option><br><br>";
            }


            document.getElementById("loadList").innerHTML=out;
            for(j=0; j< arr.length; j++)
            {
                var imgSrc;
                tempID = (arr[j].comicID);
                document.getElementById("loadList").innerHTML+="<p>"+result+"</p>";
                document.getElementById("com"+arr[j].comicID).src = result;

            }

        }

    }

</script>
</head>
<body>
<div id="loadList"></div>
<button onclick="loadComicJSON()">Try it</button>

</body>
</html>

如您所见，我创建了一个 JSON 对象数组，其中包含 ComicID 并将图像静态创建为“monkey.jpeg”。

代码有效，因此您传递给 loadComicJSON 方法的“响应”或 POST 方法的结果存在问题。

添加几个 console.log 语句并查看我提到的两个值，您可能会发现问题。

【讨论】：

好吧，我显然得到的是“comics\/100\/01.jpg”而不是“comics/100/01.jpg”。（出于某种原因，额外的正斜杠）。
@alex494 然后使用unescape() 删除那些多余的斜线。 var source = "comics\/100\/01.jpg"; var new_source = unescape(source);
@alex494 更新了评论。 new_source 应该是一个没有多余斜线的字符串。
unescape() 似乎没有改变它。
result.replace("\", "");

【解决方案2】：

自己解决了这个问题。事实证明，$.post 必须是 $.get，并且它需要在技术上处于循环之外（即在它自己的函数中）才能正常工作。在那之后现在可以正常工作了，并且进行了一些小的调整。

【讨论】：