src // 的意思/src相对协议/src为//开头的图片怎么加载

本文介绍了“相对协议”在网页中的使用方式及其优势。通过省略http:或https:前缀,以//开头的链接能根据网站当前使用的协议自动加载CDN上的资源。文中还提到了在爬虫项目中抓取到此类链接时如何处理以确保图片正常加载。
  • “相对协议”,也就是链接以 // 开头,前面省去了 http: 或 https: 字样,
  • 这样做的好处是浏览器能够根据你的网站所采用的协议来自动加载 CDN 上托管的文件!
爬虫项目里抓取的图片为//开头的可以查看下图片加载开头是http:还是https,添加上即可访问图片,也可以两个都试试.

在这里插入图片描述

在这里插入图片描述

你发现 `src/main.js` **好像没有加载到**,这是一个非常关键的问题 —— 因为它是整个前端应用的“入口”。如果它没被正确加载或执行,页面就会空白、无反应,甚至出现 404 或白屏。 --- ## 🔍 常见表现(说明 main.js 没生效) - 页面空白,没有任何错误 - 控制台没有任何输出(比如 `console.log('app started')` 不打印) - Vue / React 应用未挂载 - 网络面板中看不到 `bundle.js` 或 `main.js` 被请求 - Webpack 打包成功,但浏览器没执行 JS --- ## ✅ 正确流程:从 entry 到浏览器执行 1. Webpack 配置指定 `entry: './src/main.js'` 2. Webpack 将其打包成一个 bundle(如 `bundle.js` 或 `main.js`) 3. `HtmlWebpackPlugin` 自动生成 `<script src="bundle.js"></script>` 插入 `index.html` 4. 浏览器访问 `/` → 返回 `index.html` → 加载并执行 JS 👉 如果中间任何一环断了,`main.js` 就不会运行! --- ## ✅ 排查步骤与解决方案 ### ✅ 1. 检查 `webpack.config.js` 中的 `entry` 是否正确 ```js module.exports = { entry: './src/main.js', // ✅ 必须存在且路径正确 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' // 打包后的文件名 }, // ... }; ``` 🔧 检查点: - `./src/main.js` 文件是否存在? - 拼写是否正确?大小写敏感! - 路径是否应为 `path.resolve(__dirname, 'src/main.js')`? --- ### ✅ 2. 检查生成的 `index.html` 是否自动引入了 JS 打开浏览器开发者工具 → **Network 面板** → 刷新页面 → 查看: - 是否有 `bundle.js`(或你配置的 output.filename)被加载? - 状态码是 200 还是 404? - Size 是 `(memory)` 还是 `(disk cache)`?→ `(memory)` 表示 webpack-dev-server 在内存中提供资源,正常。 👉 如果没有 JS 文件请求 → 说明 HTML 没插入 `<script>` 标签。 --- ### ✅ 3. 检查 `HtmlWebpackPlugin` 是否工作 确保安装并配置了插件: ```bash npm install --save-dev html-webpack-plugin ``` 配置示例: ```js const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', inject: 'body' // ✅ 自动注入 script 标签 }) ] ``` ⚠️ 特别注意: - `inject: true`(默认)才会自动把打包后的 JS 插入 HTML - 如果你在 `index.html` 中手动写了 `<script src="...">`,要确保名字匹配 `output.filename` --- ### ✅ 4. 检查 `public/index.html` 是否有冲突的 script 标签 ❌ 错误写法(手动写死不存在的文件): ```html <script src="main.js"></script> <!-- 实际打包出来是 bundle.js --> ``` ✅ 正确做法:不要手动加 script,让 `HtmlWebpackPlugin` 自动注入: ```html <!DOCTYPE html> <html> <head> <title>My App</title> </head> <body> <div id="app"></div> <!-- 不要手动加 <script> --> </body> </html> ``` 或者如果你必须手动控制,就和 `output.filename` 保持一致: ```html <script src="bundle.js"></script> ``` --- ### ✅ 5. 在 `main.js` 中添加调试信息 在 `src/main.js` 开头加一行日志: ```js console.log('✅ main.js is loaded and executed!'); alert('Loaded'); // 可临时用于确认是否执行 ``` 👉 如果这个都没触发 → 说明 JS 完全没执行。 --- ### ✅ 6. 检查 DevTools 的 Sources 面板 进入 Chrome DevTools → **Sources** tab: - 展开 `localhost:8080` → `webpack://` → `./src/` - 能看到 `main.js` 吗? - 点进去能断点调试吗? 🟢 如果能看到 → 说明已加载,只是可能逻辑出错 🔴 如果看不到 → 很可能没参与构建 --- ### ✅ 7. 检查构建输出日志 终端运行 `npm run dev` 后查看输出: ```bash Entrypoint app 123 KiB = bundle.js [webpack] Compiled successfully ``` 你应该能看到类似内容。如果没有 JS 输出,说明 entry 找不到。 常见错误日志: ``` Module not found: Error: Can't resolve './src/main.js' ``` → 解决方法:修正路径或创建文件。 --- ### ✅ 8. 示例:最小可运行结构 ``` project/ ├── src/ │ └── main.js ├── public/ │ └── index.html ├── webpack.config.js └── package.json ``` `src/main.js`: ```js console.log('🎉 main.js is running!'); document.getElementById('app').innerHTML = '<h1>Hello from main.js</h1>'; ``` `public/index.html`: ```html <!DOCTYPE html> <html> <head><title>Demo</title></head> <body><div id="app"></div></body> </html> ``` `webpack.config.js`: ```js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { filename: 'bundle.js' }, devServer: { static: { directory: './public' } }, plugins: [new HtmlWebpackPlugin()] }; ``` 启动后访问 `http://localhost:8080`,应该能看到文字和控制台日志。 --- ## ✅ 总结:如何确认 `main.js` 是否加载? | 检查项 | 方法 | |-------|------| | 文件是否存在 | `ls src/main.js` | | 是否被构建 | 终端是否有编译成功日志 | | 是否生成 bundle | Network 面板看是否有 `bundle.js` 请求 | | 是否插入 HTML | 查看页面源码是否有 `<script src="bundle.js">` | | 是否执行 | 控制台是否有 `console.log` 输出 | | 是否可调试 | Sources 面板能否找到 `main.js` | ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值