Vue之assets图片加载不出来的解决
更新时间：2026年07月02日 08:39:10 作者：麻辣翅尖
本篇文章详细解释了assets和static目录在HTML和JS中的使用差异,强调了assets目录下的图片需要通过webpack的file-loader进行编译,而static目录下的图片则无需编译可以直接使用
说明
assets和static连个文件都是存放静态资源的目录
在html下使用它们是无差别的，但是在js中使用的话，assets中资源的路径要经过webpack中file-loader编译，而static中的文件，不会经过编译
二者中的图片资源，html页面可以直接使用；
但在动态循环绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以。
解决
一、图片在assets目录下
使用require（）
img:[
{imageUrl:require('../assets/2.png')},
{imageUrl:require('../assets/3.png')},
]
二、将图片放到static目录下
img:[
{imageUrl:'static/img/1.png'},
{imageUrl:'static/img/2.png')},
{imageUrl:'static/img/3.png'},
]
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何使用Vue3自定义实现一个类似el-input的组件,可以v-model双向绑定,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了Vue实现记住账号密码功能,用户登录时若勾选“记住我”功能选项，则将登录名和密码（加密后）存入本地缓存，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中，下面分享我实现的具体步骤，需要的朋友可以参考下2022-07-07
Cesium是一个用于创建高性能、跨平台的3D地球和地图的开源JavaScript库,它提供了许多功能,包括地理空间数据可视化、地理定位和地图导航等,这篇文章主要介绍了vue cesium加载点与定位到指定位置,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue组件中的父子组件使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
关于vue-cli-service:command not found报错引发的实战案例
这篇文章主要给大家介绍了关于vue-cli-service:command not found报错引发的相关资料,文中通过实例代码将解决的过程介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
Webpack是开发Vue.js单页应用程序的重要工具。下面通过四种方式给大家介绍使用Webpack提高Vue.js应用，需要的的朋友参考下吧2017-07-07
这篇文章主要介绍了vue ElementUI级联选择器回显问题解决，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
vue是前端轻量级MVVM框架,入门门槛相对较低,今天用Vue做一个购物车实例,所以下面这篇文章主要给大家介绍了关于vue实现购物车全部功能的简单方法,需要的朋友可以参考下2021-07-07
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别对比分析
在Vue中,watchEffect、watchAsyncEffect 和 watchPostEffect都是用于响应式数据监听的API,但它们在执行时机和行为上存在重要区别,接下来通过本文给大家介绍vue中的watchEffect、watchAsyncEffect、watchPostEffect的区别,感兴趣的朋友一起看看吧2025-10-10
vue-element-admin开发教程(v4.0.0之前)
本文主要介绍了vue-element-admin开发教程(v4.0.0之前)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论