vue引入图片无法显示,vue中图片加载不出来的问题

　　本文主要介绍vue页面图片不显示问题的解决方法。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。

　　在制作新版配置界面时，是用vue框架实现的。在配置页面图片的时候，发现有一个图片明明显示页面输入的路径是正确的，但是图片就是不显示出来。

　　现象：

　　网络页面资源不报错，状态码还是200。当你点击预览时，里面什么也没有。当您稍后输入它时，您会发现您输入的任何单词都显示为200。

　　解决方案：

　　在webpack中配置静态资源的路径

　　1.查找vue.config.js

　　2.在module.exports下的devServer中添加一个键

　　contentBase:path.join(_dirname， src )

　　这句话意味着webpack-dev-server将使用当前路径作为请求的资源路径。

　　参考关于contentBase的文章。

　　https://www.jb51.net/article/222324.htm

　　静态资源：

　　方法1:直接输入路径

　　img class=sys_logo src=。/assets/images/top-logo.png/

　　方法2:使用要求

　　从导入logoUrl。/top-logo.png

　　常量图像={

　　logoUrl

　　}

　　导出默认图像

　　方法3:模块化

　　从导入logoUrl。/top-logo.png

　　常量图像={

　　logoUrl

　　}

　　导出默认图像

　　使用：

　　js:

　　从导入图像。/资产/图像

　　html:

　　img class= sys _ logo :src= images . logourl /

　　关于如何解决vue页面图片不显示问题的这篇文章到此为止。更多不显示问题内容的相关vue页面图片，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。