求助,关于webpack url-loader配置图片路径错误的问题

这是我css文件图片引入的位置


这是我的webpack配置


最后就会出现这种路径,如果我把url-loader的输出名改成name=../images/[name].[ext],这样它会把图片输出到dist同级的位置,而不是dist目录内,求教怎么解决!

回答:你得配置个output.publicPath参数,我观察你的文件目录结构,初步建议你配成publicPath: ‘./dist‘,如果在浏览器里路径报错了,你可以参照着你自己的文件目录结构来改下这相对路径。

时间: 2024-12-16 08:40:14

求助,关于webpack url-loader配置图片路径错误的问题的相关文章

日积月累:配置SDK路径错误(An error occurred while automatically activating bundle com.android.ide.eclipse.adt)

在进行Android应用的开发过程中,有时候在配置SDK路径的时候(Windows->Preferences->Android),会出现如下报错:An error occurred while automatically activating bundle com.android.ide.eclipse.adt.并且重启Eclipse也没用.  注:该图为正常情况. 搜索相关资料,找到如下处理办法: 命令行到eclipse路径: 运行:eclipse.exe -clean: 日积月累:配置SD

关于Markdown插入图片路径错误的问题

关于Markdown插入图片路径错误的问题 开发问题 解决方法 妈耶,连续一天写2篇博客,也是醉了,这篇博客主要是介绍关于Markdown插入图片路径错误的问题 在上篇中,我介绍了一下Markdown的基本语法,并且提到了图片插入的方式.不过有一个问题,就是当在vscode插入图片能够完美预览,但是当在本地服务器和Github上运行,图片就无法显示. 就像这样,图片无法显示 这时候查看网页源代码发现是这样的 查看文件目录 如果这之后将网址输入为 http://localhost:4000/201

vue-cli在打包后js获取的图片路径错误问题时候

在用npm run build 打包的时候,正常img标签中的src图片路径和css中的图片路径是可以正常识别的, 但是在打包js获取的图片路径时,打包后无法找到图片,原因是 js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的). 如果你是vue-cli初始化的项目,解决的办法:第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/s

ueditor 在线附件和在线图片路径错误BUG补丁

错误 ueditor上传附件时显示和下载都是正常的,当下次点击在线附件时图片图标显示错误,再添加到网页中访问的时候出现404错误,比如:第一次添加:http://192.168.1.4:8080/uedit2/ueditor/jsp/upload/file/20140622/1403423931425017681.png第二次就变成了:http://192.168.1.4:8080/uedit2/C:/Program Files/Apache Software Foundation/Tomcat

Vue项目打包后背景图片路径错误

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

webpack 4.0 配置方法以及错误解决

选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init -y: 然后文件目录中安装webpack npm i [email protected] --save-dev  @next我也不知道是什么意思 安装cli工具 npm i webpack --save-dev 再在package.json中配置script "script":{ &qu

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

在config/index.js中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到. 解决办法:改为‘./’这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找. build: { ... assetsPublicPath: './', 原文地址:https://www.cnblogs.com/223zzm/p/11259104.html

Img控件图片路径错误,显示默认图片

<img src="路劲"  onerror="this.src='img/error.png'"/> onerror路径一定要正确,最好是本项目的文本.不然一直错误,就会一直循环onerror 原文地址:https://www.cnblogs.com/liuzheng0612/p/11468612.html

【webpack】---url-loader 图片路径问题

webpack:url-loader 图片路径问题 我们使用webpack打包项目中,在处理图片路径时, 最常用的loader有两种, url-loader 和 file-loader. 我们在写项目中引用路径的时候,填写的URL是基于我们开发时的路径, 但是在webpack打包时, 会将各个模块打包成一个文件,里面引用的路径是相对于入口html文件,并不是相对于我们的原始文件路径的.loader 可以解析项目中引入的URL,并且根据配置,把图片拷贝到相应路径, 再将打包后的文件中的路径 替换为