Vue 中项目中静态图片不显示问题
下面说两种情况:1、data中定义的图片,页面中显示时 ,应该这样定义:iconImg: require('../../static/img/tab1Gray.png');2、页面中动态获取的静态图片也要注意;<img v-if="index<3" :src='../../static/images/no' + index + '.png' />上面的真机上显示不...
·
下面说两种情况:
1、data中定义的图片,页面中显示时 ,应该这样定义:
iconImg: require('../../static/img/tab1Gray.png');
2、页面中动态获取的静态图片也要注意;
<img v-if="index<3" :src='../../static/images/no' + index + '.png' />
或则
<img ::src="playFlag ? '../../../static/images/followReadPlay.png' : '../../../static/images/followReadPause.png'" />
上面的真机上显示不出来,应改为下面方式:
<img v-if="index<3" :src="require('../../static/images/no' + index + '.png')" />
:src="playFlag ? require('../../../static/images/followReadPlay.png') : require('../../../static/images/followReadPause.png')"
需注意 不要加错位置了;结果找不到图片,例如以下是错误的:
:src="playFlag ? 'require(../../../static/images/followReadPlay.png)' : 'require(../../../static/images/followReadPause.png)'"
今天在更新一种情况:
打包后css背景图路径不对的问题
问题描述:
当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,变成http://127.0.0.1:8080/dist/static/css/static/img/topicDetailSpaceMaps.0271ef1.png 正确地址应该是:http://127.0.0.1:8080/static/dist/img/topicDetailSpaceMaps.0271ef1.png
解决办法为:只需要在build/utils.js文件中添加如下一行代码即可。
publicPath:'../../'
更多推荐
已为社区贡献14条内容
所有评论(0)