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

Question

Not sure if my solution to the buttons works for the previous and next image yet because I am not able to test them because none of the pictures are found. I have them all in the same folder and they are not misspelled. I am not sure why they cannot be found. Thank you all for helping.

The error: "GET /images[currentImage]" Error (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;
    }
  }
});

please paste the full url that's generating the error message — erik258, Feb 07 '20 at 01:22
Sorry about that. Is that what you meant, what i put in the description? — jimmy182, Feb 07 '20 at 01:25
yep, exactly. See what's happening? You didn't tell `vue` to do anything with `src` so as far as vue is concerned, it's not managing `src` at all. https://stackoverflow.com/questions/43211760/how-to-solve-interpolation-inside-attributes-has-been-removed-use-v-bind-or-the — erik258, Feb 07 '20 at 01:30
There are several problems with this code 1) As others said, your image has no binding so it's looking for an image whose filename is literally "images[currentImage]". Binding is what lets Vue know that the attribute refers to an instance property. 2) In your next/previous methods, you need to refer to `this.currentImage` instead of just `currentImage`. In the template, you omit the `this`, but in the instance scripting, you do not. 3) Methods are returning values but nothing is being done with those values, there is no need for the return statements. 4) `img` `width` needs a binding too — Dan, Feb 07 '20 at 02:07

score 0 · Answer 1 · edited Jul 15 '22 at 01:49

0

Use: v-bind:src

Instead of: src

Or you can refer to this -> https://v2.vuejs.org/v2/guide/syntax.html

If you are still having error, kindly post the structure of the folder and it's content. Thanks

edited Jul 15 '22 at 01:49

tony19

125,647
18
229
307

answered Feb 07 '20 at 01:44

Godfirst Onuoha

1
1
2

that v-bind didnt seem to fix it. I will post the structure of the folder – jimmy182 Feb 07 '20 at 01:58

Mahamudul Hasan · Accepted Answer · 2020-02-07T02:13:46.840

Just Change your index.html like below:

<!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>

and you made many mistakes in your code, just check all sort of code. here is another modification of data block

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

Okay I made some edits in my code and now the first image appears, but whenever i click the buttons, the image does not change. — jimmy182, Feb 07 '20 at 03:13

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

2 Answers2