使用 Vue 和 HTML 在 JavaScript 中制作幻灯片，但图像出现错误 404 "Not found"

Question

不确定我的按钮解决方案是否适用于上一张和下一张图片，因为我无法测试它们，因为找到了 none 张图片。我把它们都放在同一个文件夹中，而且它们没有拼错。我不确定为什么找不到它们。谢谢大家的帮助。

错误："GET /images[currentImage]"错误(404)："Not found"

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,
      images: ["meme1.PNG", "meme2.PNG", "meme3.JPG", "meme4.PNG"],
      imageWidth: 640
  },
  components: {
    customButton
  },
  methods: {
    nextImage() {
      if (currentImage == 0) {
    currentImage++;
    this.currentImage = (this.currentImage + 1) % this.images.length;
  }
  if (currentImage == 1) {
    currentImage++;
    this.currentImage = (this.currentImage + 1) % this.images.length;
  }
  if (currentImage == 2) {
    currentImage++;
    this.currentImage = (this.currentImage + 1) % this.images.length;
  }
  if (currentImage == 3) {
    this.currentImage = (this.currentImage + 1) % this.images.length;
  }
    },
    previousImage() {
        if (currentImage == 0) {
    this.currentImage = (this.currentImage - 1) % this.images.length;
  }
  if (currentImage == 1) {
    currentImage--;
    this.currentImage = (this.currentImage - 1) % this.images.length;
  }
  if (currentImage == 2) {
    currentImage--;
   this.currentImage = (this.currentImage - 1) % this.images.length;
  }
  if (currentImage == 3) {
    currentImage--;
    this.currentImage = (this.currentImage - 1) % this.images.length;
    }
  }
});

Answer 1

使用：v-bind:src

代替：src

或者你可以参考这个-> https://vuejs.org/v2/guide/syntax.html

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

Answer 2

只需像下面这样更改您的 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>

而且您的代码中有很多错误，只需检查各种代码即可。这是数据块的另一个修改

data: {
      currentImage: 0,
      test: "meme1.PNG",
      images: ["meme1.PNG", "meme2.PNG", "meme3.JPG", "meme4.PNG"],
      imageWidth: 640
  },

使用 Vue 和 HTML 在 JavaScript 中制作幻灯片，但图像出现错误 404 "Not found"

Making slideshow in JavaScript with Vue and HTML but error 404 "Not found" for images

html

javascript

image

slideshow

vue.js