0

Docker・Laravel・Viteを用いた環境でwebサイトを作成しています。JavaScriptでhtmlの画像を切り替える動きを記述したのですが、JSONファイルをimportしようとすると画像のようにpage reloadが続いてしまいます。
画像の説明をここに入力

該当のソースコード

resources/js/imgChange.js

'use strict';

import headerImages from '/storage/app/header_img.json' assert { type:"json" };

let num = -1;

function imgChange() {
    num ++;

    if (num == headerImages.length) num = 0;

    document.getElementById("headerImg").src = headerImages[num]['url'];
    document.getElementById("headerImg").alt = headerImages[num]['alt'];

    num = num - 1;

    return num;

    setTimeout(imgChange(), 10000);
}

num = imgChange();

storage/app/header_img.json

[
  {
    "url":"#",
    "alt":"\u30d8\u30c3\u30c0\u30fc2"
  }, 
  {
    "url":"#",
    "alt":"\u30d8\u30c3\u30c0\u30fc1"
  }
]

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/css/top-style.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

resources/js/app.js

// resources/js/imgChange.jsをインポート
import './imgChange';

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。