如何解决vue页面图片不显示的问题 |
您所在的位置:网站首页 › vue动态渲染图片不显示 › 如何解决vue页面图片不显示的问题 |
如何解决vue页面图片不显示的问题
发布时间:2021-09-11 14:16:15
来源:亿速云
阅读:173
作者:小新
栏目:开发技术
这篇文章主要为大家展示了“如何解决vue页面图片不显示的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决vue页面图片不显示的问题”这篇文章吧。 在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点preview里面又什么都没有,后面一输入,发现随便输入什么字都是出现的200 解决办法: 在webpack里面配置静态资源的路径 1、找到vue.config.js 2、在module.exports下面的devServer里面添加一个键 contentBase:path.join(_dirname,'src')这句话的意思就是,webpack-dev-server 会使用当前的路径作为请求的资源路径 关于 contentBase,参考文章 https://www.jianshu.com/p/e547fb9747e0 静态资源: 方法一:直接输入路径 方法二:使用 require import logoUrl from './top-logo.png' const Images = { logoUrl } export default Images方法三:模块化 import logoUrl from './top-logo.png' const Images = { logoUrl } export default Images使用: js: import Images from './assets/images'html: 以上是“如何解决vue页面图片不显示的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道! 推荐内容:解决Vue打包后访问图片/图标不显示的问题 免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 vue 上一篇新闻:手游工作室ip防封解决办法有哪些 下一篇新闻:怎么通过重启路由的方法切换IP地址 猜你喜欢 redis lua脚本实战和减库存的实现是怎样的 JavaScript 中 if包含逗号表达式怎么用 redis怎么执行lua脚本 怎么解决Spring AOP拦截抽象类父类中方法失效问题 如何理解java贪心算法 C语言strcpy库函数怎么用 IDEA如何通过Docker插件部署SpringBoot项目 python基于Tkinter怎么实现人员管理系统 C#拼图游戏的示例分析 JavaScript中MutationObServer监听DOM元素举例分析 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |