webpack:url-loader打包后找不到图片、字体路径问题

最新推荐文章于 2024-02-26 16:16:08 发布
最新推荐文章于 2024-02-26 16:16:08 发布
阅读量1k 收藏 3
点赞数
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37709148/article/details/122537019
版权

项目在css中引用图片，打包之后找不到对应的图片和字体路径        

打包配置文件的路径配置：project/config/index.js

 对应的图片打包配置：project/build/webpack.base.config.js 其中utils.assetsPath为build.assetsSubDirectory => static 也就是超过10000的就不会被base64了，而是放到static下的img文件夹中，当前这个图片大小14.65kb超过最大限制，则会放在static/img下 

   打包后的图片存放位置

打包后的图片引用css代码：

 这样一遍下来，大概就定位到问题，是因为引用的路径出问题了，找成了当前css文件下对应的static文件，实际应该是css外层文件夹下即可，但是文件打包此处static/img是改变不了的，所以要往上找两级../../，webpack打包的时候有个配置为publicPath，可以设置对应的公共路径设置成往上找两级即可

 重新打包，正常显示yeah!

 

风一样的宝妈
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
综上所述，当Vue CLI+Webpack项目打包到服务器后出现字体找不到的问题时，主要的解决方法是更新Webpack的配置，特别是`ExtractTextPlugin`和`url-loader`的`publicPath`，确保它指向正确的字体文件位置。同时，对于...
webpack打包发布中的图片路径问题记录：报错图片找不到、打包路径下没有生成images文件夹或少打包图片、打包之后打开页面img标签src=“[object Module]“
H_xiang_xiang的博客
06-30 1651
文章目录报错图片找不到打包路径下没有生成images文件夹或少打包图片打包之后打开页面img标签src="[object Module]" 最终打包结果结构 报错图片找不到 原本配置： 我在 development 模式下测试的时候，是把主页 index.html 和 bundle.js 都放在虚拟内存中，即通过http://localhost:port/就可以直接访问 还在使用webpack-dev-server的时候设置了 –content-base src ，也就是说静态资源的根目录是 src 所
Vuforia 打包后 加载图片数据集失败的解决办法
Null_BUG的博客
03-28 1216
替换掉所有中文名称
解决使用image加载相对路径(本地图片路径)加载不出来
最新发布
2301_76742166的博客
02-26 768
解决使用image加载相对路径(本地图片路径)加载不出来
Unity AssetBundle资源打包与资源加载
weixin_55532142的博客
06-22 2058
AssetBundle是Unity自带的一种资源打包方式，可以把AssetBundle文件当做加密过的压缩包。一般会编写一个扩展器工具用于打包AB资源。除了C#脚本外，我们选中的任何东西都会出现这个AB包设置界面。 点击New...新建一个我们想要的名字（它会自动给你全转为小写格式），输入完名称后记得要回车保存一下；旁边的是后缀，企业开发中常用的后缀有 unity3d，assetbundle，ab，其他自定义。我这里定义为pedestal.ab，ULua的打包格式就是写死的assetbundle，请留意。做
VUE学习笔记：18.模块化开发之webpack打包图片文件
ouyicnm的博客
06-16 505
1.webpack打包图片文件步骤 （1）前期准备 第一步：安装loader 安装file-loader npm install file-loader@3.0.1 --save-dev 安装url-loader npm install url-loader@1.1.2 --save-dev 第二步：在webpack的配置文件webpack.config.js中配置loader let path = require('path') //导入path模块 module.exports = {
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
由于Webpack的`url-loader`处理了这些文件，所以它们被内联到CSS中，但是引用路径可能没有正确地相对于CSS文件进行调整，造成在实际运行时找不到字体文件。 解决这个问题的方法是在`build/utils.js`文件中进行调整...
webpack-url-loader-master.
08-26
Webpack-Url-Loader 是 Webpack 的一个加载器（Loader），它的主要功能是处理 URL 引用的资源，如图片、字体等。在 Webpack 中，Loader 是一种特殊的函数，它接收源文件内容作为输入，经过转换后返回新的内容。Url-...
解决webpack+Vue引入iView找不到字体文件的问题
12-09
在开发基于Vue.js的项目时，常常会遇到使用Webpack配置集成第三方库，如iView时，出现找不到字体文件的问题。这个问题通常与Webpack的模块加载器（loaders）配置有关，特别是`css-loader`和`url-loader`的设置。在本...
关于Unity3D打包成exe运行后资源无法成功加载的解决方法
热门推荐
https://github.com/Bot80926
01-06 1万+
报错信息：You are tring to load data from a www stream which had the following error when downloading counldnt read a file://file                    NullReferenceException:Object reference not set to an i
webpack中使用url-loader处理字体文件 时出现的错误解决记录
qq_45192089的博客
04-04 170
直接使用命令：npm install bootstrap -D 安装之后进行使用，一直无法显示字体； 原因：直接下载的这个bootstrap中没有fonts文件夹； 解决方案：下载最新版本的bootstrapnpm install bootstrap@3.3.7 -D 就可以了； ...
webpack 使用file-loader 和 url-loader ，打包后图片不能查看且网页图片路径不正确
weixin_48650019的博客
11-25 1299
我在页面设置了两个div 来展示背景图片，图片由src/css里面的less文件引入 在安装好file-loader 和 url-loader 后如下配置： 打包后文件结构如下： 页面： 路径取的是dist 下面打包的文件，在webstorm 打开后不能解析： 打开dist/images 下的图片能够展示： 之后在收集资料的时候总结出了 解决方法 (1) ...
webpack4基本使用和url-loader压缩图片
宏斌的博客
03-05 2129
执行npm init -y, 创建package.json 文件 最基本的配置文件 entry:入口文件 output：出口，出口里面添地址，和导出的包的名字 mode 是模式默认production，可以选择为development，也可none production：生产模式：去掉debug代码，和未使用的方法函数模块，小体积,速度快 development：开发模式：文件会大些，包含debu...
解决 Webpack 打包图片不报错也不显示问题，但其图片就是显示不出来的问题
su_yun的博客
04-20 1350
问题描述： A、在 webpack.config.js 中也添加了代码为 //limit用来设置字节数，只有小于limit值的图片，才会转 //为base64图片 {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:"url-loader?limit=16940"} B、在 ‘.css’ 文件中添加的信息为： #box{ width: 700px; height: 500px; background-colo
webpack引入iview.css,解决webpack+Vue引入iView找不到字体文件的问题
weixin_39818014的博客
08-03 202
解决webpack+Vue引入iView找不到字体文件的问题发布时间：2020-09-11 21:17:18来源：脚本之家阅读：71作者：遇见一个人流泪原因：css-loader后面带了参数modules(打包报错)url-loader后面带了参数name(引入报错){test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-l...
连踩两次 css-loader 的坑，我悟了……
实验楼
04-24 386
css-loader 我真记住你了！问题描述准备自己搭一套前端框架，一路都很顺，当遇到 css-loader@6.2.0 去加载样式文件的时候，打包出来之后出现了一些莫名巧妙的文件（我是准备去修改 element-ui 库的主题样式的）。入口文件 (element-variables.scss)：/* 改变主题色变量 */$--color-primary: #409EFF...
webpack使用css-loader?sourceMap导致font(eot、ttf)等无法加载问题
u010576965的专栏
02-15 6385
使用webpack的css-loader?sourceMap时，在.scss文件中@font-face字体后，经过webpack编译后，导致无法显示字体，原因大概是由于url的问题，有兴趣的同学请参考http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#3413380
webpack 4.x打包：静态文件使用相对路径（解决：静态文件找不到目录，静态资源找不到的情况，自定义路径）
weixin_42281924的博客
10-28 1667
问题：如图所示找不到文件。 解决: package.josn中+ “homepage”:"./" 过程如下: 在网上找了无数帖子，发现都需要修改webpack.config.js文件里面的publicPath。但是没有效果。万般无奈的情况下,看了一下执行打包命令后的控制台。发现眼睛是个好东西,需要好好利用。 抱着试一试的感觉. 重新编译下:npm run build 查看打包后的index.html完美解决! ...
nodejs和webpack中获取路径原理分析
enternal07的专栏
07-12 638
__dirname 总是指向被执行 js 文件的绝对路径 ./ 指向的是工作路径，就是执行node命令的路径 process.cwd()。也是获取执行node命令的路径 持续更新
url-loader 打包时图片在不同路径下打包了两份
06-08
我理解你的问题是说，在使用 url-loader 打包图片时，同一张图片在不同路径下被打包了两份，对吗？ 可能是因为你在项目中使用了多个相同的文件路径或文件名，导致 url-loader 将同一个文件打包了多次。你可以在打包...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值