我的带有 PHP 变量源的图像已损坏答案

【问题标题】：My image with a PHP variable source is broken我的带有 PHP 变量源的图像已损坏
【发布时间】：2017-04-07 16:39:49
【问题描述】：

我的最终目标是让图像在窗口滚动超过某个点时切换到不同的图像。我从 JavaScript 开始获取整个滚动位置并设置 if/else 语句。

<script type="text/JavaScript">
    function checkHeight() {
        currentScrollPos = window.scrollY;

        if (currentScrollPos < 325)
            document.getElementById('test1').innerHTML = "../wp-content/uploads/2017/04/LOGO-1.png";
        else if (currentScrollPos > 325)
            document.getElementById('test1').innerHTML = "../wp-content/uploads/2017/04/LOGO-1-alt.png";
    }
</script>

<p id="test1"></p>

所有这些都完美无缺。 <p id="test1"></p> 的内部 HTML 内容显示了正确的图像源并在我滚动时交换了所述源。完美。

最后，我将该图像源设置为<img> 的实际源，这就是我碰壁的地方。我尝试使用一个简单的 PHP 变量。

<?php
$src = <<<END
<p id="test1"></p>
END;
?>

这很奏效。我可以echo 那个$src 并像以前一样正确显示图像源。所以我继续，我把它放到下面的代码中。

<img src='<?php echo $src; ?>' />

但什么都没有。似乎它在一定程度上起作用，只是在我加载页面时它向我显示了一个损坏的图像符号。为什么找不到我的图像文件？我错过了什么愚蠢的东西吗？

【问题讨论】：

src 属性只需要包含 URL。您正在尝试将 p 标签放在 src 属性中。
返回heredoc manual；如果这是您的实际代码，并且在结束标识符之前包含所有这些空格，那么您有一个（解析）错误。
你到底为什么使用<p> 作为img src？你到底想在这里做什么，让我们发疯？ lol 恕我直言，您的代码没有任何意义。
currentScrollPos 为 325 的概率是多少？那时你不会得到一个 id。
所有代码都运行良好，除了将变量作为图像源。这就是我感到困惑和询问的部分

标签： javascript php html image

【解决方案1】：

新的工作代码。很抱歉浪费了你所有的时间，成为一个彻头彻尾的白痴。

<script type="text/JavaScript">

function checkHeight() {
    currentScrollPos = window.scrollY;

    if (currentScrollPos < 325)
        document.getElementById('image').src = "../wp-content/uploads/2017/04/LOGO-1.png";
    else if (currentScrollPos > 325)
        document.getElementById('image').src = "../wp-content/uploads/2017/04/LOGO-1-alt.png";
}
</script>

<body onload="checkHeight();" onScroll="checkHeight();"></body>
    <img id="image" width="200px" />

【讨论】：