如何在vueJs2中使用来自外部json文件的图像？

Question

我有一个外部json文件，我想从中获取图像到我的组件，这是我的json文件：

{
"items": [
 {
   "id": "1",
   "name": "test1",
   "src": "../images/1.jpg",
   "alt": "test1"
 },
 {
   "id": "2",
   "name": "test2",
   "src": "../images/1.jpg",
   "alt": "test2"
 },
 {
   "id": "3",
   "name": "test3",
   "src": "../images/1.jpg",
   "alt": "test3"
 },
 {
   "id": "4",
   "name": "test4",
   "src": "../images/1.jpg",
   "alt": "test4"
 }
]
}

以及在我的组件中：

 import songs from '../assets/songsData/songs.json';

 export default {
     name: "newSongs",
     data() {
         return {
             songList: songs.items,
         }
     }
 }

在我的模板中，我有一个 v-for ：

<div class="col-lg-2 col-md-3 col-sm-3 col-6 items"
       v-for="(song,index) in songList" :key="index">

      <img :src="song.src" :alt="song.alt">
</div>

图像的 alt 正在显示，但图像编号...

我尝试过此操作，但未显示照片：

 <img :src="require(song.src)" :alt="song.alt">