【Vite】requireを使わない動的な画像表示について

実現したいこと

Viteを使ってフロントエンドを開発しているのですが、変数を用いて動的な画像表示をしたいです。

前提

一般的には動的に画像を表示する際はrequire()を用いると思うのですが、Viteを使っているのでrequireを使用することができません。
なにも使用せずに変数にそのままパスを入れるような形で実行すると、「Not allowed to load local resource」とでます。
変数を使って画像を表示させる場合どのような処理が必要になるのでしょうか。
変数を使わず、相対パスで指定したら正常に画像は表示されます。

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

Not allowed to load local resource: file:///絶対パス/public/img/sample1.jpg

該当のソースコード

Veu.js

1<template> 2 <h1 class="mt-5">Test</h1> 3 4 <div class="selectable-box" v-for="f in folder_path"> 5 <img :src='f' > 6 </div> 7 8</template> 9 10<script> 11 12export default { 13 name: 'Test', 14 data() { 15 return { 16 folder_path: [ 17 '../public/img/sample1.jpg', 18 '../public/img/sample2.jpg', 19 '../public/img/sample3.jpg', 20 } 21 } 22} 23</script>