vue.jsで配列に保存された画像パスを:srcで表示させることができない

前提

nuxt.jsにてサイト制作中。
:srcで配列内の画像パスを指定しても1×1で表示され、正常に表示されずに困っています

実現したいこと

jsonファイル内の配列に記載された画像パスを正常に表示させたい

発生している問題・エラーメッセージ

該当のソースコード

vue.js

<template> <div class="data-img"><img :src="imgSrc[0]" width="100%" alt=""></div> </template> <script> import person from '../assets/personal.json'; export default { data: function(){ return { person:person[0] } }, computed: { imgSrc: function () { return this.person.photo }, }, } </script>

JSON

[ { "photo":["/assets/img/photo1.jpg","/assets/img/photo2.webp","/assets/img/photo3.webp"], }]

試したこと

require()を使うということでしたが今ひとつ使い方が分からず困っています。

vue.js

imgSrc: function () { return require(this.person.photo[0]) },

補足情報（FW/ツールのバージョンなど）

package.json

{ "name": "testap", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "core-js": "^3.25.3", "nuxt": "^2.15.8", "vue": "^2.7.10", "vue-server-renderer": "^2.7.10", "vue-template-compiler": "^2.7.10" }, "devDependencies": {} }