webpack图片问题小结

最新推荐文章于 2022-06-10 14:00:06 发布
最新推荐文章于 2022-06-10 14:00:06 发布
阅读量866 收藏
点赞数
分类专栏： 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-dev-server删除dist目录，图片不显示
weixin_38289787的博客
08-11 590
不是问题的问题哇擦本质参考感谢点赞 哇擦 配置 webpack-dev-server 不就是为了提高开发效率（懒），然后图片在火狐浏览器竟然显示不出来。一看我滴个亲娘勒，好家伙把我打包后生成的 dist 目录删了就不重新打包了（因为之前配置了clean-webpack-plugin插件，它的作用就是在打包之前把 dist 目录删除掉）？ 本质 好吧，在浏览器上搜了一圈，也没得到解决办法????。最后用 Chrome 找到 segmentfault社区才发现 使用webpack-dev-server是不会生成
在使用Webpack打包本地img图片文件时 图片加载失败 [object Module] 404 (Not Found)
"✧treasure mountain✧"
04-30 6800
问题描述 在Vue组件里引入了一张本地的图片： <template> <div> <img src="../../images/test.png"> </div> </template> 然后图片就挂了： 顿时一脸懵 因为图片在本地是有的 而且Ctrl+左键也能访问 发现src变成了[object Module]： <i...
vue配合webpack打包后html中img路径和css背景图路径找不到解决方案
weixin_45177374的博客
06-05 984
// html的img路径解决：config/index.js 中build模块 build: { // Template for index.html index: path.resolve(__dirname, '../../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../...
webpack构建项目图片路径404问题....
weixin_33924770的博客
05-14 2638
一、 webpack-dev-server开发环境下的路径问题 假设工程目录结构如图: 备注： react-news项目目录1 /node_modules/ ------ 项目依赖包文件 2 /dist/ ------ 打包生成目录 2 /src/ ------ 项目原始代码目录 2.1 /assets/ ----- 静态资源目录 ...
webpack对静态资源的处理（url-loader 和 file-loader）解决图片加载不出来问题
weixin_43589827的博客
06-10 3462
解决前端图片加载不出来问题，url-loader和file-loader的关系
webpack之引入图片
coding...
05-02 7918
前言： 本文演示了 webpack如何在css文件中引入图片； webpack如何在html中引入图片； 需要安装配置的loader: file-loader; 为何要使用file-loader： 如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。     其中一个就是引用路径的问题。拿backg...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
6. 小结 在本文中，我们讨论了webpack打包过程中因为图片的路径导致的问题，并提供了相应的解决方案。通过指定publicPath属性，我们可以成功地解决图片路径的问题，并且使得图片文件可以被正确地找到。
深入理解 webpack 文件打包机制(小结)
08-28
Webpack 是一个流行的模块打包工具，它将前端应用中的各种资源（如 JavaScript、CSS、图片等）转换成浏览器可执行的格式。本篇文章将深入探讨 Webpack 的文件打包机制，包括单文件打包、代码分割、不同版本间的差异...
React+Webpack快速上手指南(小结)
10-18
Webpack 则是一个模块打包工具，它可以将各种类型的资源（如 JavaScript、CSS、图片等）转换并打包成浏览器可理解的格式。 快速上手 React+Webpack 需要以下几个步骤： 1. **项目结构**：首先，你需要一个合理的...
iView框架问题整理小结
10-17
在使用iView过程中，可能会遇到一些常见问题，以下是对这些问题的详细解答： 1. **import Vue from 'vue';** 这句话在JavaScript中表示导入Vue.js模块并将其赋值给变量Vue。`import`是ES6的模块导入语法，用于加载...
webpack4 从零学习常用配置(小结)
10-16
Webpack 4 是一款强大的前端模块打包工具，它能够解析、转换和优化JavaScript、CSS、图片等各类资源，形成可供浏览器使用的静态资源。本篇文章主要针对Webpack 4的基础配置进行总结，帮助开发者快速理解和掌握其核心...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
weixin_42442651的博客
06-04 1229
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下一、首先修改config目录下的index.js文件将其中build的配置项assetsPublicPath进行修改，改为目的是将资...
webpack 打包后 图片名称不一致导致页面上图片404问题
萌新不会永远是萌新的博客
12-18 1607
webpack 打包后 图片名称不一致导致页面上图片404问题 webpack 中使用 html-loader (| html-withimg-loader) 和 html-webpack-plugin时，打包后，image文件夹中图片的名字被转化，但是index.html img src使用的图片名字名字仍然是打包前图片的名字 打包后图片的名字： 打包后html 中引入的名字： 导致页面...
运行 Webpack 项目图片和favicon.ico找不到， 图片404错误
Baron的技术blog
09-01 980
解决办法：查看开发者工具和页面，发现图片链接为[object module] url-loader默认导出的内容遵循ES模块语法，而vue-loader导入资源默认以commonJS的方式导入 修改url-loader的options，增加 esModule: false favicon.ico404错误： 方法一：直接在HtmlWebpackPlugin中配置 修改HtmlWebpackPlugin new HtmlWebpackPlugin({ title: 'Webpack Vue', fav
安装webpack报错：npm ERR! 404 Not Found: @webassemblyjs/ast@1.7.11
weixin_41646804的博客
12-24 5203
webpack的版本不兼容。
html img路径 404,webpack css背景图片无法现实，图片路径404
weixin_34303763的博客
06-17 598
项目引入sass，然后，尼玛，图片死活不显示……然后看下，尼玛，路径404，什么鬼？然后，编辑中级编辑css，是好的啊……这么到webpack里面，就不认图片路径了呢？//require('normalize.css/normalize.css');require('styles/App.scss');importReactfrom'react';//importHeaderfrom...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
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、付费专栏及课程。

余额充值