webpack图片问题小结

最新推荐文章于 2022-06-10 14:00:06 发布
最新推荐文章于 2022-06-10 14:00:06 发布
阅读量864 收藏
点赞数
分类专栏： Vue2.0 文章标签： vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CystalVon/article/details/71640981
版权

虽然是一个小问题，但是遇到坑的时候依然觉得很烦躁。最常见的问题就是404 not found，比如下面报错

GET http://localhost:8080/user.img 404 (Not Found)

先分析在webpack项目中图片的应用场景：
1. HTML文件中img标签的src属性引用或者内嵌样式引用

<img src="photo.jpg" />
<div style="background:url(photo.jpg)"></div>

2 . CSS文件中的背景图等设置

.photo {
最低0.47元/天 解锁文章
ArmorVon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
6. 小结 在本文中，我们讨论了webpack打包过程中因为图片的路径导致的问题，并提供了相应的解决方案。通过指定publicPath属性，我们可以成功地解决图片路径的问题，并且使得图片文件可以被正确地找到。
vue配合webpack打包后html中img路径和css背景图路径找不到解决方案
weixin_45177374的博客
06-05 983
// html的img路径解决：config/index.js 中build模块 build: { // Template for index.html index: path.resolve(__dirname, '../../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../...
webpack-dev-server删除dist目录，图片不显示
weixin_38289787的博客
08-11 587
不是问题的问题哇擦本质参考感谢点赞 哇擦 配置 webpack-dev-server 不就是为了提高开发效率（懒），然后图片在火狐浏览器竟然显示不出来。一看我滴个亲娘勒，好家伙把我打包后生成的 dist 目录删了就不重新打包了（因为之前配置了clean-webpack-plugin插件，它的作用就是在打包之前把 dist 目录删除掉）？ 本质 好吧，在浏览器上搜了一圈，也没得到解决办法????。最后用 Chrome 找到 segmentfault社区才发现 使用webpack-dev-server是不会生成
webpack构建项目图片路径404问题....
weixin_33924770的博客
05-14 2635
一、 webpack-dev-server开发环境下的路径问题 假设工程目录结构如图: 备注： react-news项目目录1 /node_modules/ ------ 项目依赖包文件 2 /dist/ ------ 打包生成目录 2 /src/ ------ 项目原始代码目录 2.1 /assets/ ----- 静态资源目录 ...
在使用Webpack打包本地img图片文件时 图片加载失败 [object Module] 404 (Not Found)
"✧treasure mountain✧"
04-30 6791
问题描述 在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.png"> </div> </template> 然后图片就挂了： 顿时一脸懵 因为图片在本地是有的 而且Ctrl+左键也能访问 发现src变成了[object Module]： <i...
webpack对静态资源的处理（url-loader 和 file-loader）解决图片加载不出来问题
weixin_43589827的博客
06-10 3432
解决前端图片加载不出来问题，url-loader和file-loader的关系
深入理解 webpack 文件打包机制(小结)
08-28
Webpack 是一个流行的模块打包工具，它将前端应用中的各种资源（如 JavaScript、CSS、图片等）转换成浏览器可执行的格式。本篇文章将深入探讨 Webpack 的文件打包机制，包括单文件打包、代码分割、不同版本间的差异...
关于webpack2和模块打包的新手指南（小结）
12-08
webpack已成为现代Web开发中最重要的工具之一。它是一个用于JavaScript的模块打包工具，但是它也可以转换所有的前端资源，例如HTML和CSS，甚至是图片。它可以让你更好地控制应用程序所产生的HTTP请求数量、允许你...
iView框架问题整理小结
10-17
在使用iView过程中，可能会遇到一些常见问题，以下是对这些问题的详细解答： 1. **import Vue from 'vue';** 这句话在JavaScript中表示导入Vue.js模块并将其赋值给变量Vue。`import`是ES6的模块导入语法，用于加载...
webpack4 从零学习常用配置(小结)
10-16
Webpack 4 是一款强大的前端模块打包工具，它能够解析、转换和优化JavaScript、CSS、图片等各类资源，形成可供浏览器使用的静态资源。本篇文章主要针对Webpack 4的基础配置进行总结，帮助开发者快速理解和掌握其核心...
Webpack全面实战企业级项目搭建视频.zip
07-06
12_2_11_自动编译工具小结 13_2_12_loader_处理css文件 14_2_13_loader_处理less和sass文件 15_2_14_loader_处理图片和字体文件 16_2_15_loader_自定义图片打包目录和打包名称 17_2_16_loader_处理js文件之...
Vue 打包体积优化方案小结
10-15
7. **图片优化**：使用`image-webpack-loader`压缩图片，或引入懒加载策略只在图片即将进入视口时加载。 8. **避免重复依赖**：确保项目没有重复引入相同库的情况，使用`npm dedupe`命令查找并合并重复依赖。 9. *...
使用webpack4 + vue2 从零开始创建的 TodoList 前端项目
最新发布
10-11
若有想要学 Webpack 的，真的很值得下载这个资源： 其一、包括初始化安装 webpack 工具； ... ...其十一、实现 MainHeader 组件、核心 MainTodo 组件、MainFooter 组件，明确需求与业务逻辑及项目小结
Vue中图片Src使用变量的方法
10-16
小结 在Vue项目中，动态设置图片`src`通常涉及到路径问题，特别是当项目进行打包时。使用网络资源、`import`或`require`都是有效的解决方案。选择哪种方法取决于图片资源的存储位置和项目配置。理解这些方法的原理...
浅谈网页基本性能优化规则小结
09-22
1. **静态资源压缩**：使用构建工具如webpack或gulp对CSS、JavaScript和图片进行压缩，减少文件大小，从而加快加载速度。例如，CSS和JavaScript可以通过minify进行压缩，图片可以使用工具进行适当地压缩，以降低其...
webpack 打包后 图片名称不一致导致页面上图片404问题
萌新不会永远是萌新的博客
12-18 1600
webpack 打包后 图片名称不一致导致页面上图片404问题 webpack 中使用 html-loader (| html-withimg-loader) 和 html-webpack-plugin时，打包后，image文件夹中图片的名字被转化，但是index.html img src使用的图片名字名字仍然是打包前图片的名字 打包后图片的名字： 打包后html 中引入的名字： 导致页面...
webpack-dev-server 404 找不到文件
enternal07的专栏
06-26 1946
webpack-dev-serverserves bundled files from the directory defined inoutput.path, i.e., files will be available underhttp://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]
html img路径 404,webpack css背景图片无法现实，图片路径404
weixin_34303763的博客
06-17 591
项目引入sass，然后，尼玛，图片死活不显示……然后看下，尼玛，路径404，什么鬼？然后，编辑中级编辑css，是好的啊……这么到webpack里面，就不认图片路径了呢？//require('normalize.css/normalize.css');require('styles/App.scss');importReactfrom'react';//importHeaderfrom...
webpack图片压缩
08-20
对于使用 webpack 进行图片压缩，你可以使用以下几种方法： 1. 使用 image-webpack-loader 插件：这是一个 webpack 插件，用于压缩图片。你需要安装它并将其添加到你的 webpack 配置中。首先，安装插件： ``` npm ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值