下面说两种情况:

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:'../../'

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐