在撰写“Web端3d图形技术Three.js介绍”预览示例遇到无法加载图片,Three.js编写3d程序前端脚本,对几何体贴图材质在“localhost:”启动编译预览情况下图片能正常访问,但是在物理路径访问打开html时浏览器却加载不到图片,页面预览显示不出来,具体加载材质图片代码:“ const texture = new THREE.TextureLoader().load('images/20220215170647.png');”。报两个错:

1. Access to image at 'file:///D:/2022/threeJS/ThreeJS/ThreeJS/images/20220215170647.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

2. Failed to load resource: net::ERR_FAILED   ……    images/20220215170647.png:1

如下图:

报错原因:这个问题按正常路径读取图片,在启动虚拟编译预览localhost:路径下或上传实际服务器的物理路径,是不会出现这两个问题,因为纯粹的html+JavaScript文件是无权读取图片加载图片的,但是在网络路径下是可以的,本地从文件夹直接打开html所以会报这个错“Failed to load resource: net::ERR_FAILED/无法加载资源”。