今天开发遇上了一个非常神奇的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>