VUE项目，通过接口返回数据判断需要展示的图片及默认图片的设置

最新推荐文章于 2023-12-13 14:49:24 发布

wdcc.fade

最新推荐文章于 2023-12-13 14:49:24 发布

阅读量2.1k

点赞数 1

文章标签： vue es6 vue.js

本文链接：https://blog.csdn.net/qq_45915537/article/details/104924030

版权

前端根据接口返回的game_id展示相应游戏图标，若无对应图标则显示默认图default.png。方法一通过预先定义支持的图片ID数组比对，方法二使用try-catch动态加载图片，后者在图片数量多时更简洁。

摘要由CSDN通过智能技术生成

需求说明：前端需要通过接口返回的数据game_id展示对应的游戏图标。如果不存在对应的图标，则展示默认图标；如：接口返回game_id: 25，则需要在页面中展示文件25.png,如果不存在25.png 则展示默认图标defalt.png。

方法一：在通过循环生成时：

		<a v-for="(item, index) in gameList"  :key="index">   //gameList 为借口返回数据经过处理后的数组，每一项都是一个对象，其中包括game_id和game_name
          	<img :src="require(`@/assets/images/game-list/remove_${gameImageList[index]}.png`)"  />  //gameImageList为game_id组成的数组，如果存在没有id对应的图片则将game_id 更改为'defalt'
            <strong>{
  {item.game_name}}</strong>
            <i class="arr"></i>
        </a>

以上需注意两点：
1.在vue绑定动态的scr值是需要用到v-bind(简写：）且必须通过require引入，否则不 能正确的解析路径导致报错。
2.通过require引入时，会将整个图片文件夹里的图片全部加载，为了避免加载时间过长，可以将需要用到的图片单独放一个文件夹。

然后声明一个数组，将需要用到的图片文件名称存上.:

const supportImageIds =[18,