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/static的），比如图片放在static/img/a.png
第二步，js中使用./static/img/a.png去引用就行了。

时间： 2024-08-13 12:27:46

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

vue elementUI icon打包后不显示问题

vue+elementUI,icon打包后不显示,需要在build→utils.js文件中修改 1.找到build文件夹下utils.js文件 2.在以下代码片段中加入 publicPath: '../../' if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', // 解决elementui icon打包后不显示的问题 publicPath: '

解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白解决办法: 前端精品教程:百度网盘下载 config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯

项目打jar包后无法获取配置文件的路径问题

项目打jar包后无法获取配置文件的路径问题今天在开发中做一个java项目,要求读取配置文件中的信息,当项目打jar包以后就找不到配置文件了,问题最后解决了,拿出来跟大家分享一下. 方式一:getResource(这种方式在war包好用,在jar包不好用): public static void main(String[] args) { String path=App.class.getClassLoader().getResource("config.properties").ge

java ,js获取web工程路径

一.java获取web工程路径 1),在servlet可以用一下方法取得: request.getRealPath(“/”) 例如:filepach = request.getRealPath(“/”) ”//upload//”; 2),不从jsp,或servlet中获取,只从普通java类中获取: String path = getClass().getProtectionDomain().getCodeSource().getLocation().getPath(); SAXReader()

js获取项目根路径

1 //js获取项目根路径,如: http://localhost:8083/uimcardprj 2 function getRootPath(){ 3 //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp 4 var curWwwPath=window.document.location.href; 5 //获取主机地址之后的目录,如: uimcardprj/share/meun.jsp 6 var pathName=wind

java 或者 js 获取项目访问路径（域名）

/** * 获得站点url * @return */ public String getWebUrl(){ String url = getRequest().getScheme() + "://" + getRequest().getServerName(); if(getRequest().getServerPort()!=80){ url+= ":" + getRequest().getServerPort(); } url+=getRequest().get

js 获取div 图片高度

使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异 jquery有以下两种常用的jquery事件加载的方法 $(function(){}); window.onload=function(){}

vue.js 打包时出现空白页和路径错误

vue-cli输入命令:npm run build 即可打包vue.js的项目打包出来后项目中就会多了一个文件夹dist,下图为我们打包过后的项目我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性: assetsPublicPath属

Vue CLI 3开发中屏蔽烦人的EsLint错误

问题 Vue开发中,特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误.有关EsLint这个工具的作用不再赘述.查阅网上参考文档,大多是针对早起版本Vue CLI工具项目的,在我最新使用的Vue CLI 3生成的工程中根本不起作用.无奈之下,认真学习了Vue CLI 3官方文档,终于找到最佳答案. 办法 Vue这个前端框架相对于React和Angular,入门会非常快.但是,到了中后期实战阶段仍然有许多工程实际问题需要我们一块一块地攻克.Vue CLI这