vue 图片未加载显示默认图片,vue引入图片无法显示
本文主要介绍图片在vue中无法加载的问题及解决方法。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.项目打包后，打开整体空白。1.路径问题的解决方案。2.打包后vue-router历史模式界面空白。2.vue-cli的assets和static这两个文件的区别。简化本地图像加载方法的解决方案。使用vue开发项目时，常见的一个问题是图片无法加载。以下是我总结的几张图片加载不了的情况和解决方法。
一、项目打包完成后，打开整体空白
1、路径问题
原因
在vue webpack的项目中，项目打包后css和js的引用路径是绝对的，项目部署后会把static作为根目录，导致文件引用路径错误。
解决办法
通过修改配置文件将绝对路径更改为相对路径。
具体操作如下：
1.vue-cli 3.0版本之前
在config下的index.js中配置bulid模块导出的路径。因为index.html里面的内容都是通过脚本标签引入的，而你的路径是错误的，所以开篇一定是空白的。先看一下默认路径。
模块.导出={
构建：{
env: require(。/prod.env )，
index: path.resolve(__dirname，./dist/index.html )，
assets root:path . resolve(_ _ dirname，./dist )，
资产子目录：静态，
assets public path:“/”，
productionSourceMap: true，
assetsPublicPath的默认值是“/”，即根目录。而我们的index.html和静止都在同一级目录下。所以应该改成’。/
2.vue-cli 3.0版本之后
配置vue.config.js文件
模块.导出={
//baseUrl:“”。/，//下面用的是vue-cli3.3。
公共路径：“”。//使用VUE-CLI 3.3新版本。
2、vue-router的history模式打包后界面空白
router/index.js路由配置中的默认模式是哈希。如果您将其更改为历史模式，它将是空白的。因此，只需将它更改为hash或删除模式配置，让它成为默认值。
如果你必须使用历史模式，你需要在服务器端添加一个覆盖所有情况的候选资源：如果URL不匹配任何静态资源，你应该返回一个index.html，这是你的应用所依赖的页面。
//mode: history //默认哈希
二、assets目录下图片加载不出来
vue-cli的assets和static的两个文件的区别
Assets:在项目编译时会被webpack解析成模块依赖，只支持相对路径的形式，比如img src=。/logo.png 和背景：URL(。/logo.png)。“/logo.png”是相对资源路径，有些Web包会解析成模块依赖。静态：webpack不会处理该目录中的文件。简单来说，第三方文件存储的地方不会被webpack解析。它将被直接复制到最终的打包目录(默认为dist/static)。必须使用绝对路径引用这些文件，绝对路径由config.js文件中build.assetsPublic和build.assertsSubDirectory的链接决定。任何放在static/中的文件都需要作为绝对路径来引用：/static[filename]。根据webpack的特点，一般来说，静态文件不会改变，第三个文件是文件，而断言文件可能会改变。
原因
在webpack中，图像将被用作一个模块，因为它是动态加载的，所以url-loader将无法解析图像地址，然后在npm run dev或npm run build之后将不会处理路径[web pack解析的路径将被解析为/static/img/[filename]。png，完整的地址是localhost:8080/static/img/[filename]。png。
解决办法
1.将图片作为模块加载进去
例如，图像：[{src: require(。/1.png)}，{src: require(。/2.png)}]，以便webpack可以解析它。
2.将图片放到static目录下
但必须写成绝对路径比如images: [{src: "/static/1.png"}，{src: "/static/2.png"}]这样图片也会显示出来。当然，您可以通过在webpack.base.config.js中定义它来缩短路径的写入长度
简化本地图片加载的方法
1.在static里面新建一个imageUrls文件夹
2.填写imageUrls文件
{
imageUrls: [
{
image1 ://静态/图像/图像1。巴布亚新几内亚
},
{
image2 :/static/image/image2。巴布亚新几内亚
}
]
}
3.将imageUrls引入响应的vue文件中，解析引用就行了
导入图片自./././static/image URL/image URL。JSON
导出默认值{
data() {
返回{
图像组：img.imageUrls
}
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。