vue 使用require（）--拼接本地圖片

1，根據類型拼接對應的圖片

 

<div>
//注意：我這里是循環的取得對應的i下的type,和我下面data定義的type是相等的
      <img  :src="imageUrl(i.resImage)" width="84px" height="82px" alt="暫無圖    片" />
</div>

2.js

 imageUrl(type) {
            let iconStr = '';
            this.typeImage.forEach(item => {
                if (item.type === type) {//根據Type拼接對應的圖片
                    iconStr = require(`../resources-list/images/${item.image}`);
                } else {
                    return false;
                }
            });
            // 如果沒有圖片的時候給默認圖片
            // if (iconStr == '') {
            //     iconStr = require('./images/nodata.png');
            // }
            return iconStr;
        },

3.data

        typeImage: [
                { type: 'kubernetes', image: 'kubernetes.png' },
                { type: 'hadoop', image: 'hadoop.png' },
                { type: 'gbase', image: 'gbase.png' },
                { type: 'gaussdb', image: 'gaussdb.png' },
                { type: 'vertica', image: 'vertica.png' },
                { type: 'teradata', image: 'teradata.png' },
                { type: 'db2', image: 'db2.png' },
                { type: 'mysql', image: 'mysql.png' },
                { type: 'oracle', image: 'oracle.png' },
                { type: 'flink', image: 'flink.png' },
                { type: 'nodata', image: 'nodata.png' },
                { type: 'hive', image: 'hive.png' },
                { type: 'spark', image: 'spark.png' },
                { type: 'hbase', image: 'hbase.png' },
                { type: 'kafka', image: 'kafka.png' },
                { type: 'redis', image: 'redis.png' },
                { type: 'elasticsearch', image: 'elasticsearch.png' },
                { type: 'codis', image: 'codis.png' },
                { type: 'ftp', image: 'ftp.png' },
                { type: 'http', image: 'http.png' },
                { type: 'mq', image: 'mq.png' },
                { type: 'minio', image: 'minio.png' },
                { type: 'postgresql', image: 'postgresql.png' },
                { type: 'postgresxl', image: 'postgresxl.png' },
                { type: 'greenplum', image: 'greenplum.png' },
                { type: 'aster', image: 'aster.png' }

            ],