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';