使用JavaScript使用Vue和HTML进行幻灯片显示,但错误404“找不到图像”

问题描述 投票:1回答:1

[不确定我的按钮解决方案是否适用于上一张和下一张图像,因为找不到任何图片,因此我无法对其进行测试。我将它们全部放在同一个文件夹中,并且不会拼错。我不确定为什么找不到它们。谢谢大家的帮助。

错误:“ 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];
      }
    }
  }
});
javascript html image vue.js slideshow
1个回答
0
投票

尝试一下:

或者您可以参考此->https://vuejs.org/v2/guide/syntax.html

如果仍然有错误,请发布文件夹的结构及其内容。谢谢

© www.soinside.com 2019 - 2024. All rights reserved.