在手机EDGE上测试网页设计

Question

我正在尝试运行图片库查看器。 目前，它可以在Google Chrome中正常运行。

我已将其移至Windows Phone以测试移动Edge浏览器。 HTML，CSS和JavaScript似乎都可以运行，但是img标签似乎有问题，无法加载。

我已经浏览了有关Edge等的官方Microsoft论坛，但找不到与此问题相关的任何内容。

然后简化了代码，并给出了相同的错误，即img标签未显示实际的img。

<html>
    <head></head>
    <body>
        <img src='p0.jpg'>
        <p></p>
        <script>
            document.querySelector('p').textContent = document.querySelector('img').src
        </script>
    </body>
</html>

当我在浏览器中查看它时，我在左下角的下面看到一个小的“残破的图像”图标：file：/// C：/Data/Users/Public/Documents/Gallery/pictures/p0.jpg

如何在本地（移动）参考中显示它？ 图像文件有问题吗？ 就像我是移动浏览器一样，我应该如何测试网站的整体用户体验？

Answer 1

经过一些广泛的测试，我自己尝试使图像在加载时失败，但我还没有发现问题。 由于缺乏结果，我感到唯一可能的问题是您的映像没有被复制到任何一个，或者您将其放置在错误的目录中。 通常最好的做法是使用img文件夹存储所有图像，然后再移动整个文件。 我只能建议您的图像文件位于您要引用的正确位置（在这种情况下，与HTML文件位于同一文件夹）。

另一个可能的解决方案是尝试引用在线托管的图像（使用Google搜索某些内容，然后复制并粘贴完整的URL）。 确保先在桌面设备上运行，然后再在移动设备上尝试。 如果可行，那就太好了-您的问题与您自己的托管映像文件/位置有关。 如果它不起作用，则可能需要更深入地研究并找出设备/浏览器的问题所在。

抱歉，这不是一个非常有用的答案，但我希望它能以某种方式对您有所帮助