webpack打包图片地址问题

最新推荐文章于 2021-01-26 16:04:56 发布
最新推荐文章于 2021-01-26 16:04:56 发布
阅读量246 收藏
点赞数
分类专栏： 踩坑记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbnight/article/details/70917924
版权

打包的时候css和html都有图片，打包的过程后htmls和css里的图片路径不一样，改了半天img的loader。一直要么是html里面的图片路径不对,要么是css里的图片路径不对。 然后试着给css加了个publicPath值； 然后就好了 - -~ 

浪费了两个多小时的时间，  记录一下……

jex_久尘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack图片问题小结
Armor的博客
05-11 866
虽然是一个小问题，但是遇到坑的时候依然觉得很烦躁。最常见的问题就是404 not found，比如下面报错GET http://localhost:8080/user.img 404 (Not Found)先分析在webpack项目中图片的应用场景： 1. HTML文件中img标签的src属性引用或者内嵌样式引用<img src="photo.jpg" /> <div style="backgro
webpack打包遇到的问题解决
qq_41117240的博客
02-28 580
webpack打包 软件 vscode 文件的存储位置，以及文件 index.html代码 Document 这是第1个li 这是第2个li 这是第3个li 这是第4个li 这是第5个li 这是第6个li 这是第7...
webpack配置打包后图片路径出错的解决
08-27
本篇文章主要介绍了webpack配置打包后图片路径出错的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack打包后直接访问页面图片路径错误的解决方法
08-30
主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
vue-cli中打包图片路径错误的解决方法
08-29
主要介绍了vue-cli中打包图片路径错误的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
webpack打包vue项目后，一些文件图片路径找不到的问题解决办法
王永存
09-23 9162
最近写了一个百度地图的项目，要求底部有一个导航栏。具体如下图： 首先，拿到了底部导航栏的所有图标图片，图片都有两种。灰色的代表未选中，选中的用带样色的图片替换。 先看一下，组件中 html结构：通过vue提供的v-for方法，进行遍历显示footNav这个数组。数组里边存放着{title:"银行"，url:" "，url1:" "}，将图片的 src与isSel
webpack 打包警告超出文件大小
最恨不过不努力
05-16 4221
webpack 打包超过文件大小 错误如图所示： 如图所示，vue项目中运行 npm run build 命令针对项目进行打包时的警告，黄色部分描述已经很清楚了，就是打包的文件大小超过了vue默认文件大小的限制 如何解决？？？ 减少单个文件的体积 参考 webpack 性能调优与 Gzip 原理 修改配置文件，改变默认的限制 这个我们针对第二种解决方案进行讲解 找到 vue.config.js 配置文件 修改 performance ，属性的具体用法参考 webpack中文文档 configure
完美解决webpack打包css背景图片路径问题
11-20
本文将详细解析如何解决Webpack打包CSS背景图片路径问题。 首先，让我们分析问题所在。在Vue组件的样式部分，我们可能会写入如下的CSS代码： ```css background-image: url("../assets/img/icon_add.png"); ``` 在...
浅谈webpack打包过程中因为图片的路径导致的问题
08-28
浅谈webpack打包过程中因为图片的路径导致的问题 在本文中，我们将讨论webpack打包过程中因为图片的路径导致的问题，并提供相应的解决方案。 1. 问题背景 在使用webpack打包时，我们可能会遇到图片路径的问题。...
详解webpack打包nodejs项目(前端代码)
10-18
Webpack 是一个流行的前端构建工具，它能够将 JavaScript、CSS、图片等各类前端资源打包成一个或多个可部署的文件。Webpack 打包 Node.js 项目（尤其是前端代码）的场景通常发生在前端应用需要与后端服务紧密结合时...
webpack踩坑之路图片的路径与打包
08-29
在使用 Webpack 打包图片时，我们还需要注意 output.publicPath 属性的配置。output.publicPath 属性表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。 output...
thymeleaf引入静态图片_webpack基础配置-管理项目中的静态资源
weixin_39613291的博客
11-03 953
一、概述 对于像Browserify这样的打包工具而言，仅仅能够处理 JavaScript。然而我们的工程不仅仅有 JavaScript，还有模板、样式文件、图片等等其它类型的资源，这就意味着我们还需要使用别的工具去管理它们。在 Webpack 的思想中一切皆模块，所有模板、样式、图片等等这些资源都是模块，因为这些资源也具备模块的特性——它们都负责特定的职能，并且具有可复用性。因此，我们...
使用 webpack 打包vue项目时，图片的URL地址变成了 [object object]又或者图片没有报错却加载不出来的原因
肿肿的博客
01-26 2040
当使用webpack对图片进行打包时，发现图片路径变为url([object object])。这是因为我们在使用url-loader的时候，有一个limit属性，图片实际的大小大于limit指定的大小，因此会去使用file-loader，但项目里面没有这个包，要先用npm安装一下。或者直接将limit调大一点。也有可能是因为url-loader更新的版本造成的。 错误： 因此解决的办法有： 方法一：如果没有报错，但图片没有显示出来。我们只需要在webpack.config.js中将url-loader进
webpack打包图片路径问题
weixin_34419326的博客
09-04 779
那些年，我用webpack踩过的坑 webpack打包图片文件路径问题 output.publicPath 将publicPath在浏览器中引用时指定输出文件的公共URL地址。 处理静态资源引用地址用的 。 打包后默认情况是url(文件名) 这样必须确保资源文件和css处于同一目录，但我们显然不希望这样，希望修改打包引用地址。 {te...
【webpack脱坑指南】打包之后css中资源文件路径不正确
harryperlau的博客
01-07 899
bug描述 项目中使用了 layer，在执行 webpack 打包编译之后，layer.css 文件中用到的资源文件路径找不到，导致放大和关闭图标无法在页面上正常显示。 原因：（来自官方文档） 对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在...
webpack打包后引入的背景图片路径错误
weixin_45043158的博客
08-13 566
webpack打包后引入的背景图片路径错误 前言 @/ 符号是 src/ 目录别名， js 中可直接使用，非 js 文件需要加 ~@/，webpack打包时才会识别 1. js中引入 使用require("@/assets/img/logo/logo.png")引入图片路径，拼接到元素style上 <div style='background: url('+require("@/assets/img/logo.png")+');'></div> 2. 非js中引入 例如： css
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
webpack打包图片压缩
08-26
在使用Webpack打包图片时，可以通过以下两种方式进行压缩： 1. 使用Webpack插件：可以使用诸如`image-webpack-loader`、`imagemin-webpack-plugin`等插件来压缩图片。这些插件会在Webpack的构建过程中自动对图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值