0

我是 web 开发的新手，我很难让我的 web 快速加载。

所以我找到了这篇文章并实现了它。在可视化我的页面时，我发现图像根本没有呈现。我得到以下图像：

在此处输入图像描述

图片html

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="~/images/menunavegacion.png" />

脚本

<script>
    function init() {
        var imgDefer = document.getElementsByTagName('img');
        for (var i = 0; i < imgDefer.length; i++) {
            if (imgDefer[i].getAttribute('data-src')) {
                imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
            }
        }
    }
    window.onload = init;
</script>

调试信息

另外，我用 chrome 调试它，它似乎可以正确地用假图像切换真实图像。然而，网络没有加载正确的。

在此处输入图像描述

我错过了什么？

谢谢你的帮助

4

1 回答 1

2

当您将src属性中的图像路径设置为 时~/images/img.png，asp.net 将解析该路径并生成一个相对于应用程序基础 url: 的 url /app_path/images/img.png。

但是属性的值data-src没有被处理并且看起来像~/images/img.png（仍然以 为前缀~）。当您将 的值替换为src的值时data-src，浏览器会将图像的路径解析为http://sample.com/~/images/img.png。您的服务器上可能不存在此路径，您会收到错误 404。

综上所述，您需要使用WebForms或MVC~中的方法将其删除。ResolveUrlUrl.Content

于 2016-04-20T21:42:27.813 回答