检查assets文件夹中是否确实包含了你要显示的图片文件,并且文件名和扩展名都完全正确。 检查Vue项目的webpack配置: 确保webpack配置中正确处理了assets文件夹中的图片文件。通常,Vue CLI创建的项目会默认配置好file-loader或url-loader来处理图片文件。但如果自定义了webpack配置,需要确保这些loader被正确配置和使用。
在Vue项目打包后,图片无法显示的原因主要有路径错误、资源未正确引入、webpack配置问题以及图片文件未打包成功。通过检查路径、确保正确引入资源、验证webpack配置,并确认图片文件是否打包成功,可以有效解决这个问题。 进一步建议: 使用Vue CLI 提供的工具:如vue inspect命令查看 webpack 配置,确保图片资源配置正确。 调试...
vuecss引入 asstes中的图片无法显示的四种解决方法 这里主要针对的是vuecli2中的一些问题。 vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时...
【转】vue工程中图片无法显示 使用vue-cli后做项目,将图片路径放到了src/assets文件夹下,然后打包到线上时发现图片找不到了 解决方式: 1.将图片放到static文件夹下 2.修改config/index.js中,build对象下的assetsPublicPath为‘/’,原来的是'./' 3.修改图片路径:写成绝对路径(例如:'/static/1.png') ---转...
二、assets目录下图片加载不出来 vue-cli的assets和static的两个文件的区别: assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=’./logo.png‘>和background:url(./logo.png),‘./logo.png‘是相对资源路径,将有webpack解析为模块依赖。
在Vue CLI项目中,Webpack配置文件可能会影响图片的加载和打包。确保你的vue.config.js文件中正确配置了assetsDir和publicPath,以便在生产环境中正确指向资源文件。 assetsDir:指定生成的静态资源(如图片、字体等)存放的目录。 module.exports = { assetsDir: 'static' ...
src='@/assets/img/tabbar/tabbar_me@2x.png' <TabBarItem imgUrl=@/assets/img/tabbar/tabbar_me@2x.png title="我的"></TabBarItem> 环境说明 IDE IDE:VSCode Version:1.50.1 package.json { "name": "vue-cli", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-...
使用绝对路径,首先要了解服务器根目录在哪,大家都知道,在vue-cli的项目本身自带一个服务器的,基于webpack-dev-server模块,根目录为public文件夹,所以,使用绝对路径的方式展示图片,必须把图片放到public文件夹,这也是最简单的一种方式,这种方式webpack不会介入,所以最终显示效果与引入时的代码一致,代码如下: ...
import myImage from '@/assets/my-image.png';```然后使用 `myImage` 变量来显示图片：```html ...