由于尝试从不同的源(origin)访问资源时,由于没有正确的协议,导致浏览器阻止了这个请求。

比如这个报错

从错误信息来看,是'file:///C:/Users/Administrator/Desktop/Labeindex.html:1lImage-master/images/example/football.jpg' 访问图片,而这个路径不是以 http 或 https 开始的,因此被浏览器阻止了。建议把本地图片的地址部署成绝对地址 可以使用 

这个--》Postimages — free image hosting / image upload

把本地图片地址转成http//https 网址再用项目就可以启动不会报错啦

解决这个问题的方法取决于具体情况。以下是解决方案:

  1. 使用绝对URL:确保你尝试访问的图片URL是完整的,包括协议(例如http或https)。例如,如果你的图片URL应该是 'http://example.com/images/football.jpg'。
  2. 设置图片服务器:如果你正在开发一个Web应用,并且图片存放在本地文件系统中,你可能需要设置一个图片服务器来提供这些图片。这样,你的图片URL就会以http或https开头,不会被浏览器的CORS策略阻止。
  3. 使用数据URL:如果你的图片是小的,或者你有大量的图片,你可能希望将它们转换为Base64编码的字符串,并将这些字符串直接嵌入到你的HTML或CSS中。这样,你就不需要从外部源加载图片,也就不会遇到CORS问题。
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐