【HTML】image not loaded for security reasons

最新推荐文章于 2024-03-05 16:46:27 发布

原创最新推荐文章于 2024-03-05 16:46:27 发布 · 919 阅读

0 ·

CC 4.0 BY-SA版权

语言-HTML 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了解决WebGL项目中因安全原因导致的图像加载失败问题，提供了两种解决方案：一是通过搭建网站访问，二是内嵌图片资源，确保项目在本地运行时也能正常加载图像。

问题描述

Uncaught Error: image not loaded for security reasons (serve this page over "http://" instead)
    at Function.Texture.fromImage (lightgl.js:1843)
    at new Renderer (renderer.js:106)
    at window.onload (main.js:65)

解决方案

方案一、搭建网站访问

有服务器环境，将项目部署在web服务器上，最简单的tomcat。

方案二、内嵌图片资源

以WebGL-Water为例：

<!DOCTYPE html>
<html><head>
  <title>WebGL Water</title>
  <script src="lightgl.js">
  </script>
  <script src="cubemap.js"></script>
  <script src="renderer.js"></script>
  <script src="water.js"></script>
  <script src="main.js"></script>
  <style type="text/css">
    * { -webkit-user-select: none; 
      -moz-user-select: none; 
      cursor: default; }
    body { font: 13px/18px Arial,
       sans-serif; background: black; 
       color: white;
       overflow: hidden; }
       img {
         visibility: hidden;
       }
  </style>
</head><body>
  <div id="loading">Loading...
  <img id="tiles" src="https://img-blog.csdnimg.cn/2022010621122374958.jpeg">
  <img id="xneg" src="https://img-blog.csdnimg.cn/2022010621122374958.jpeg">
  <img id="xpos" src="https://img-blog.csdnimg.cn/2022010621122374958.jpeg">
  <img id="ypos" src="https://img-blog.csdnimg.cn/2022010621122374958.jpeg">
  <img id="zneg" src="https://img-blog.csdnimg.cn/2022010621122374958.jpeg">
  <img id="zpos" src="https://img-blog.csdnimg.cn/2022010621122374958.jpeg">
</div>
</body></html>