Q&A
前提・実現したいこと
jQueryのVegasやbgswitcherを使って背景画像をスライドショーをさせたい。
発生している問題・エラーメッセージ
jQueryのVegasを用いて背景画像をスライドショーさせたいが、画像が表示されない。
画像がうまく読み込まれていないようで、DevToolのconsoleを見ると
「GET file:///C:/Users/（省略）/Desktop/jQuery%E3%83%86%E3%82%B9%E3%83%88/img/mv1.jpg net::ERR_FILE_NOT_FOUND img/mv1.jpg:1
Image (async)
_goto @ vegas.min.js:10
next @ vegas.min.js:10
(anonymous) @ vegas.min.js:10
setTimeout (async)
_slideShow @ vegas.min.js:10
(anonymous) @ vegas.min.js:10
setTimeout (async)
w @ vegas.min.js:10
_goto @ vegas.min.js:10
next @ vegas.min.js:10
(anonymous) @ vegas.min.js:10
setTimeout (async)
_slideShow @ vegas.min.js:10
(anonymous) @ vegas.min.js:10
setTimeout (async)
w @ vegas.min.js:10
load (async)
_goto @ vegas.min.js:10
(anonymous) @ vegas.min.js:10
setTimeout (async)
_init @ vegas.min.js:10
t @ vegas.min.js:10
(anonymous) @ vegas.min.js:10
each @ jquery.min.js:2
each @ jquery.min.js:2
b.fn.vegas @ vegas.min.js:10
(anonymous) @ script.js:2
e @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2」とエラーが出ています。
もともとbgswitcherを使って背景画像をスライドショーさせたかったが、同じく画像が表示されなかった。
一番怪しいのがパスの指定方法だと思いましたが、何度も確認しましたし、エディター上もファイル名にカーソルを合わせると画像が表示されます。
※Unsplash SourceのランダムURLを指定すると正常にスライドショーが作動します。
きっとどこか初歩的なところのミスだとは思いますが、昨日からつまずいているので質問させて頂きました。
該当のソースコード（vegas.min.cssとvegas.min.js以外）
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <link rel="stylesheet" href="vegas.min.css" /> 8 <link rel="stylesheet" href="style.css" /> 9 10 <title>Document</title> 11 </head> 12 <body> 13 <div id="vegas"></div> 14 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 16 <script src="js/vegas.min.js"></script> 17 <script src="js/script.js"></script> 18 </body> 19</html>
css
1#vegas { 2 width: 100vw; 3 height: 100vh; 4}
javaScript
1$(function () { 2 $("#vegas").vegas({ 3 slides: [{ src: "img/mv1.jpg" }, { src: "img/mv2.jpg" }, { src: "img/mv3.jpg" }], 4 }); 5});
補足情報
ファイルの保管場所は下記です。
「jsフォルダ」の中に「imgフォルダ」、「imgフォルダ」の中に「mv1.jpg～mv3.jpg」があります。
あなたの回答
tips
プレビュー
