[不确定我的按钮解决方案是否适用于上一张和下一张图像,因为找不到任何图片,因此我无法对其进行测试。我将它们全部放在同一个文件夹中,并且不会拼错。我不确定为什么找不到它们。谢谢大家的帮助。
错误:“ GET / images [currentImage]”错误(404):“未找到”
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
</head>
<body>
<div id="app">
<button @click="previousImage">Previous image</button>
<button v-on:click="nextImage">Next image</button><br><br>
<img src="images[currentImage]" width="imageWidth">
</div>
</body>
<script src="vue.js"></script>
<script src="app.js"></script>
</html>
app.js:
const customButton = {
template: "<button>Custom button</button>"
};
new Vue({
el: '#app',
data: {
currentImage: 0,
test: "meme1.PNG",
images: ["meme1.PNG", "meme2.PNG", "meme3.JPG", "meme4.PNG"),
imageWidth: 640
},
components: {
customButton
},
methods: {
nextImage() {
if (currentImage == 0) {
currentImage++;
return images[1];
}
if (currentImage == 1) {
currentImage++;
return images[2];
}
if (currentImage == 2) {
currentImage++;
return images[3];
}
if (currentImage == 3) {
return images[3];
}
},
previousImage() {
if (currentImage == 0) {
return images[0];
}
if (currentImage == 1) {
currentImage--;
return images[0];
}
if (currentImage == 2) {
currentImage--;
return images[1];
}
if (currentImage == 3) {
currentImage--;
return images[2];
}
}
}
});