js中出现报错:net::ERR_FILE_NOT_FOUND的解决

这篇具有很好参考价值的文章主要介绍了js中出现报错:net::ERR_FILE_NOT_FOUND的解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

net::ERR_FILE_NOT_FOUND的意思是:网:错误_文件_没有找到,也就是说绑定数据源文件有问题。这时要检查是否是拼写错误、路径错误,或者是逻辑问题。

我的控制台报错如下:

js中出现报错:net::ERR_FILE_NOT_FOUND的解决

我的页面显示如下:

js中出现报错:net::ERR_FILE_NOT_FOUND的解决 

从这里可以看出,大致思路没问题,只是数据问题。

首先怀疑是否没有获取到数据,在绑定数据的函数中console.log(data)

发现控制台输出了数据(如下图),证明路径和拼写无误,那么就是逻辑问题了。

js中出现报错:net::ERR_FILE_NOT_FOUND的解决 

此时代码为:

js中出现报错:net::ERR_FILE_NOT_FOUND的解决 

 再从头顺一遍逻辑:

1.获取要绑定数据的位置

2.定义一个实名函数bindData,传递实参(lesson.online),lesson为对象,对象中有个数组online。lesson中不止有online一个数组

3.将bindData的返回值给到页面中。

4.编辑bindData,形参为data。定义空字符串str用来字符串拼接。最后返回str。

此时发现data为一个数组,用data直接点不能直接获得相应的属性,所以需要循环。

更改后的代码为:

 function bindData(data){
        console.log(data)
        //定义空字符串
        var str = "";

        //字符串拼接
        //同步课程
        str += `<li> <div class="top">
                    <span class="rj">${data.cont}</span>
                    <img src="${data.src}" alt="" class="m">
                    <p>${data.isFree ? `${data.num}人在学习`:` <span>${data.num}人已考试</span><span>${data.time}</span>`}</p>
                </div>
                <div class="bottom">
                    <div class="left">
                       ${data.isFree ? `<span>${data.title}</span>
                       <span class="time">${data.time}课时</span>`:` <span>${data.title}</span>`}
                    </div>
                    <div class="right">免费学习</div>
                </div></li>`

        return str;
    }

lesson.online数据为:文章来源地址https://www.toymoban.com/news/detail-512208.html

// 课程区域数据
var lesson = {
    online: [
        {
        title: '行政管理专业班1',
        src: './img/index/banner1.png',
        cont: '人教版',
        time: 23,
        isFree: true,
        num: 1100
    }, {
        title: '行政管理专业班2',
        src: './img/index/banner2.png',
        cont: '沪教版',
        time: 23,
        isFree: true,
        num: 1100
    }, {
        title: '行政管理专业班3',
        src: './img/index/banner3.png',
        cont: '人教版',
        time: 23,
        isFree: true,
        num: 1100
    }, {
        title: '行政管理专业班4',
        src: './img/index/banner4.png',
        cont: '人教版',
        time: 22,
        isFree: true,
        num: 1100
    }, {
        title: '行政管理专业班5',
        src: './img/index/banner5.png',
        cont: '沪教版',
        time: 33,
        isFree: true,
        num: 1100
    }, {
        title: '行政管理专业班7',
        src: './img/index/banner7.png',
        cont: '人教版',
        time: 44,
        isFree: true,
        num: 1100
    }, {
        title: '行政管理专业班6',
        src: './img/index/banner6.png',
        cont: '人教版',
        time: 33,
        isFree: true,
        num: 1100
    }, {
        title: '行政管理专业班8',
        src: './img/index/banner8.png',
        cont: '人教版',
        time: 44,
        isFree: true,
        num: 1100
    }]
}

到了这里,关于js中出现报错:net::ERR_FILE_NOT_FOUND的解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 轻松打造完美客户服务系统,这4个关键点不容错过

    轻松打造完美客户服务系统,这4个关键点不容错过

      客户服务对于一个企业来说非常重要,有以下几个原因: 1、建立客户忠诚度:通过提供高质量的客户服务,可以增加客户满意度和忠诚度。这将有助于企业保持竞争优势并吸引新客户。 2、提高客户满意度:客户对企业的服务感到满意时,他们更有可能再次购买或推荐给朋

    2024年02月04日
    浏览(13)
  • 电脑数据丢失怎么办?5 种免费数据恢复软件能帮到您

    电脑数据丢失怎么办?5 种免费数据恢复软件能帮到您

    我们存储在计算机中的个人和专业数据如果丢失,可能会给我们带来经济和精神上的困扰。有许多情况会导致此类数据丢失;其中一些包括意外删除、硬盘驱动器故障、软件崩溃、病毒攻击等。 5 种最佳免费数据恢复软件 为防止此类事故,建议定期备份计算机上的数据。您可

    2024年02月22日
    浏览(15)
  • windows环境下实现ffmpeg本地视频进行rtsp推流

    windows环境下实现ffmpeg本地视频进行rtsp推流

    摘要:有时候服务端(如linux)或者边缘端(jetson盒子)需要接受摄像头的视频流输入,而摄像头的输入视频流一般为rtsp,测试时需要搭建摄像头环境,很不方便,因此需要对本地视频进行rtsp推流,模拟摄像头的rtsp输入。 本地使用windows10, 64位 rtsp下载地址:https://github.com

    2024年04月13日
    浏览(10)
  • 腾讯云网站备案流程步骤、备案审核通过时间详细说明

    腾讯云网站备案流程步骤、备案审核通过时间详细说明

    腾讯云网站备案流程先填写基础信息、主体信息和网站信息,然后提交备案后等待腾讯云初审,初审通过后进行短信核验,最后等待各省管局审核 ,前面腾讯云初审时间1到2天左右,最长时间是等待管局审核时间,网站备案地区不同管局审核时间也不同,快的3天即可通过审核

    2024年02月03日
    浏览(15)
  • lua学习笔记21完结篇(lua中的垃圾回收)

    lua学习笔记21完结篇(lua中的垃圾回收)

    输出 学习地址  【唐老狮】Unity热更新之Lua语法_哔哩哔哩_bilibili 

    2024年04月15日
    浏览(28)
  • Vue中的MVVM【第三篇】

    Vue中的MVVM【第三篇】

            MVVM图示  🌈 一、MVVM简介          简单来说: MVVM(M-VM-M) ,一种更好的UI模式解决方案,MVVM通过数 据双向绑定 让数据 自动地双向同步。 M(Model):Model数据模型,json格式数据 V(View):View视图,jsp、html VM(ViewModel):ViewModel视图模型   🌈 二、MVVM详解        我以

    2024年02月04日
    浏览(14)
  • SpringBoot API 接口防刷

    SpringBoot API 接口防刷

    接口防刷: 顾名思义,想让某个接口某个人在某段时间内只能请求N次。 在项目中比较常见的问题也有,那就是连点按钮导致请求多次,以前在web端有表单重复提交,可以通过token来解决。 除了上面的方法外,前后端配合的方法。现在全部由后端来控制。 在你请求的时候,服

    2023年04月18日
    浏览(8)
  • Spark On Hive配置测试及分布式SQL ThriftServer配置

    Spark On Hive配置测试及分布式SQL ThriftServer配置

    Spark本身是一个执行引擎,而没有管理metadate的能力,当我们在执行SQL的时候只能将SQL转化为RDD提交。而对于一些数据中的元数据Spark并不知道,而Spark能写SQL主要是通过DataFrame进行注册的。 这时候我们就可以借助Hive中的MetaStore进行元数据管理。也就是说把Hive中的metastore服务

    2024年01月21日
    浏览(11)
  • 回归预测 | MATLAB实现GA-ELM遗传算法优化极限学习机多输入单输出回归预测(多指标,多图)

    回归预测 | MATLAB实现GA-ELM遗传算法优化极限学习机多输入单输出回归预测(多指标,多图)

    效果一览 基本介绍 回归预测 | MATLAB实现GA-ELM遗传算法优化极限学习机多输入单输出回归预测(多指标,多图),输入多个特征,输出单个变量,多输入单输出回归预测; 多指标评价,代码质量极高;excel数据,方便替换,运行环境2018及以上。 程序设计 完整源码和数据获取

    2024年02月11日
    浏览(14)
  • flowable工作流--实操篇

    flowable工作流--实操篇

    本文通过申请发工资的业务场景来介绍使用工作流的全流程,包括画流程图,设置属性,以及代码编写 使用工作流大致分为四步 第一步:根据自己的业务画好流程图 第二步:设置流程图的属性和变量,保存模型 第三步:部署画好的流程图(发布) 第四步:根据业务和流程图写一些服务和

    2024年02月11日
    浏览(12)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包