Python Eel Pillow JavaScript 画像が表示できない

実現したいこと

学習を始めて３か月ほどの初学者のため、初歩的なミスの場合は申し訳ありません。

Python3.11.7（exe化にNuitkaを使用のため）
EelとPillowを使った画像合成GUIアプリ
何枚か画像を読み込んでテーブル部分に表示し、最終的にそれを繋げたものを出力したい

部分的にTkinterを用いてファイルダイアログを実装
以前TkinterとPillowで似たようなアプリを作成したので、Pythonの記述の一部はそこから借用
開いた画像ファイルをリストに格納しつつ、パスを返り値にして、Javascriptで取得して順番に画面に表示したい

発生している問題・分からないこと

pythonで実行しているとき、取得したパスから画像が表示できない

該当のソースコード

python

1import eel 2import tkinter as tk 3import os 4import platform 5from PIL import Image 6from tkinter import filedialog, Toplevel 7 8eel.init("web")9 10class App(tk.Tk):11 def __init__(self):12 super().__init__()13 self.geometry("0x0")14 self.system = platform.system()15 16count = 017tkapp = App()18 19@eel.expose20def PYgetcwd():21 print("getcwd")22 return os.getcwd()23 24@eel.expose25def PYreadfile():26 global count 27 tkapp.deiconify()28 tkapp.lift()29 type = [("画像ファイル", "*.jpg;*.jpeg;*.png;*.bmp")]30 paths = filedialog.askopenfilenames(filetypes=type)31 if not paths:32 tkapp.withdraw()33 return "break"34 for imgpath in paths:35 name = os.path.basename(imgpath)36 if count == 0: # 一度目の追加37 pathlist = [imgpath]38 piclist = [Image.open(imgpath)]39 tkapp.withdraw()40 return pathlist 41 42if __name__ == "__main__":43 eel.start("main.html")44 tkapp.mainloop()

javascript

1const menubar = ["file","edit"];2const menus = {};3const menuchildren = {};4 5menubar.forEach(x => {6 menus[x] = document.getElementById(x);7 menuchildren[x] = document.getElementById(`child${x}`);8 menus[x].addEventListener("click", function(){9 menubar.forEach(y => {10 menus[y].style.backgroundColor = "#aaa";11 menuchildren[y].style.display = "none";12 });13 menus[x].style.backgroundColor = "#bbb";14 menuchildren[x].style.display = "block";15 });16});17 18var selectimg = document.getElementById("select");19const cells = ["a","b","c","d","e","f","g","h","i","j"];20const files = {};21 22cells.forEach(x => {23 files[x] = document.getElementById(x);24 files[x].addEventListener("click", function(){25 cells.forEach(y => {26 files[y].style.border = "none";27 });28 files[x].style.border = "3px dashed #ddd";29 selectimg.src = files[x].src;30 });31});32 33async function getcwd(){34 var cwd = await eel.PYgetcwd()();35 return cwd;36}37 38var pathlist = [];39var count = 0;40const filename = document.getElementById("name");41const readfile = document.getElementById("readfile");42readfile.addEventListener("click",async function(){43 cwd = await getcwd();44 let pathlist = await eel.PYreadfile()();45 pathlist.forEach((imgpath) => {46 var path = new URL(imgpath, `file://${cwd}`).href;47 filename.readOnly = "false";48 filename.value = path;49 filename.readOnly = "true";50 files[cells[count].toLowerCase()].src = path;51 });52 53});54 55const save = document.getElementById("save");56save.addEventListener("click",async function(){57 cwd = await getcwd();58 path = 'C:/Users/tsuka/Desktop/新しいフォルダー (3)/hoge.png';59 path = new URL(path,`file://${cwd}`);60 filename.readOnly = "false";61 filename.value = path;62 filename.readOnly = "true";63 files["fr"].src = "hoge2.png";64});65 66const overwrite = document.getElementById("overwrite");67overwrite.addEventListener("click",function(){68 files["fr"].src = "file:///C:/Users/tsuka/Documents/GitHub/charaChip-generator/web/hoge3.jpg"69});

試したこと・調べたこと

上記の詳細・結果

画像を直接指定した場合は表示される（save部分のhoge2）
上記を絶対パスに変換してSRCに直接指定するjavascriptのコード（overwrite部分のhoge3）は表示されない

ただしJavascriptのみで動くようにしてChromeでテストした場合は両方表示される

補足

特になし