Создание слайд-шоу в JavaScript с Vue и HTML, но ошибка 404 «Не найдено» для изображений - PullRequest
Новая
       25

Создание слайд-шоу в JavaScript с Vue и HTML, но ошибка 404 «Не найдено» для изображений

1 голос
/ 07 февраля 2020

The folder everything is in Не уверен, что мое решение для кнопок работает для предыдущего и следующего изображения, потому что я не могу проверить их, потому что ни одно из изображений не найдено. У меня все они в одной папке, и они не написаны с ошибками. Я не уверен, почему их нельзя найти. Спасибо всем за помощь.

Ошибка: «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>

приложение. 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;
    }
  }
});

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Просто измените свой индекс. 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
  },
0 голосов
/ 07 февраля 2020

Использование: v-bind: sr c

Вместо: sr c

Или вы можете сослаться на это -> https://vuejs.org/v2/guide/syntax.html

Если у вас все еще есть ошибка, пожалуйста, опубликуйте структуру папки и ее содержимое. Спасибо

...