Vue循环动态获取图片的URL

    今天开发遇上了一个非常神奇的bug，图片的路径正确，但是img标签却无法获取路径显示图片。
    后面问了他人才知道，这个应该是由于Webpack别名和路径解析错误导致的。放在src/assets目录下的文件会被Webpack打包，最终路径并不是原来的路径。

    解决方式：你可以使用require或import在JavaScript中导入图片，并使用Webpack的别名@来引用它们，并将结果存储在data中。

<template>
    <div class="homepage-container">
        <div class="flight-container">
            <div class="flight-box">
                <div v-for="(item,key) in flightData" :key = "key">
                    <img :src="item.imgURL" alt="图标加载失败">
                    <p>{{item.title}}</p>
                    <p>{{item.content}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HomePage',
    data() {
      return{
        flightData:[
            {imgURL:require('@/assets/images/FlightInspection/工作台.png'),title:'工作台',content:'*****'},
            {imgURL:require('@/assets/images/FlightInspection/大屏板.png'),title:'大屏看板',content:'*******'},
            {imgURL:require('@/assets/images/FlightInspection/小程序.png'),title:'飞视巡检小程序',content:'*****程'}
        ]
}
</script>