VR 视图（Web）抓取无效 URL答案

【问题标题】：VR View (Web) grabbing invalid URLVR 视图（Web）抓取无效 URL
【发布时间】：2017-11-09 00:51:41
【问题描述】：

我正在尝试使用 VR View for the web 显示 360 度图像。我在本地创建了一个基本示例，它可以正常工作，但是一旦我将代码放入我的项目中，我就会收到一个 404 错误，提示找不到资源。

vrview.min.js 文件正在将我的图像路径（如 image: 'images/myImage.jpg' 输入）转换为：

http://localhost:80/Project/index.html?image=http://localhost/Project/images/myImage.jpg&is_stereo=false&

IIS 没有找到图像，整个过程抛出了一个巨大的 404 服务器错误。

这是我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>View 360 Image</title>

        <script type="text/javascript">
            window.addEventListener('load', onVrViewLoad);

            function onVrViewLoad() {
                var vrView = new VRView.Player('#vrview', {
                    image: 'images/myImage.jpg',
                    width: 800,
                    height: 700,
                    is_stereo: false
                });
            }
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <div id="vrview"></div> <!-- Placeholder where the VR player will display -->
        </form>

        <script src="includes/vrview.min.js"></script>
    </body>
</html>

任何帮助都会很棒。谢谢！

【问题讨论】：

这是一个路径问题。您需要确保图像中的路径正确：属性。您还应该确保在项目的该路径中有该图像文件。请记住“images/”与“/images/”指向不同的位置。 / 将带您从根目录开始，没有它，您将从当前所在的 url 开始。
@Liquidchrome - 如果我去掉 http://localhost:80/Project/index.html?image= 和变量并将 http://localhost/Project/images/myImage.jpg 粘贴到浏览器中，它会完美地显示图像。
所以在您的代码中， image: 'images/mem_off_tab.jpg' 是否以localhost/Project/images/mem_off_tab.jpg 的形式存在？还可以尝试将其传递给创建的 url...localhost:80/Project/index.html?image=http://localhost/Project/…
woops... 旨在为该问题通用该文件名。但是，是的，这是存在的。
@Liquidchrome - 但是，第二个链接不起作用。我无法将图像的 URL 作为参数传递给索引页。

标签： javascript asp.net iis http-status-code-404 virtual-reality

【解决方案1】：

如果您想传递要加载的 url，您似乎需要使用 google 的服务 url。您在本地服务器上托管 vrview.min.js 并将其传递给没有运行服务的本地主机。

<iframe src="//storage.googleapis.com/vrview/2.0/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true">
</iframe>

VS.

<iframe src="//localhost/Project/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true">
</iframe>

这是我用来在本地机器上测试的稍微修改过的 html 版本。正在为我加载示例 Google 图片。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>View 360 Image</title>

        <script type="text/javascript">
            window.addEventListener('load', onVrViewLoad);

            function onVrViewLoad() {
                var vrView = new VRView.Player('#vrview', {
                    image: '//storage.googleapis.com/vrview/examples/coral.jpg',
                    width: 1440,
                    height: 680,
                    is_stereo: true
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="vrview"></div>
        </form>
        <script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
    </body>
</html>

VR 查看文档：https://developers.google.com/vr/concepts/vrview-web

【讨论】：

这很有帮助，让我找到了解决方案。切换到 Google 托管源使其工作。我通常会停在那里，但因为我在几天前构建的示例演示中使用它，所以答案比我做的简单。我只复制了 vrview.min.js 文件，它需要从 github 下载的所有内容，而不仅仅是 vrview JS。

【解决方案2】：

我找到了答案。我只在要显示 VR 播放器的页面上包含您导入的 vrview.min.js 文件。从 github 下载的存档中包含一个完整的文件目录。我错误地认为大部分文件都是用于示例演示。

我所有的初始代码都是正确的，我只是缺少vrview.min.js 链接到的文件。一旦我将多余的文件放到正确的文件夹中，360 度照片就会按预期显示。

【讨论】：

能否请您发布文件名列表及其正确顺序。