Cannot display images in Vuejs

Question

I've set up a carousel using bootstrap-vue. The carousel-items are created dynamically using a for loop and an array. The array contains three objects with the following keys: id, caption, text and image path. So far, I am able to display the caption and text but not the images. I checked the console and there was no error. Hence, I am very confused. Below are my codes and screenshots of the problem

UPDATE: I am trying to fix this problem for 2 days already, help is greatly needed!

This is my project structure

This are my codes

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="10000"
      controls
      indicators
      background="#ababab"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <b-carousel-slide
        v-for="item in carouselItems"
        :key="item.id"
        :caption="item.caption"
        :text="item.text"
        :style="{ 'background-image': 'url(' + item.image + ')' }"
      ></b-carousel-slide>
    </b-carousel>
  </div>
</template>

<script>

export default {
  data() {
    return {
      carouselItems: [
        {
          id: 1,
          caption: "Memories",
          image: "@/assets/images/Homepage-min.jpg",
          text: "Memories(1)"
        },
        {
          id: 2,
          caption: "Memories",
          image: "@/assets/images/Homepage-min.jpg",
          text: "Memories(2)"
        },
        {
          id: 3,
          caption: "Memories",
          image: "@/assets/images/Homepage-min.jpg",
          text: "Memories(3)"
        }
      ],
      slide: 0,
      sliding: null
    };
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true;
    },
    onSlideEnd(slide) {
      this.sliding = false;
    }      
  }
};
</script>

Here is a screenshot:

Update I went to take a look at the networks tab to see if I specified the wrong image path. However, the image path was correct as the status code is 304. What seems to be the problem? Can anyone help?

Update: I've removed the style and replaced it with the following code

:img-src="item.image"

After I save the changes and refresh, I can see an icon indicating that the browser could not load the images.

Update I've successfully rendered the images to the carousel-slide. Apparently, "require" is needed if the image path is relative. I've updated this portion of my code to the following

data() {
    return {
      carouselItems: [
        {
          id: 1,
          caption: "Memories",
          image: require("@/assets/images/Homepage-min.jpg"),
          text: "Memories(1)"
        },
        {
          id: 2,
          caption: "Memories",
          image: require("@/assets/images/Homepage-min.jpg"),
          text: "Memories(2)"
        },
        {
          id: 3,
          caption: "Memories",
          image: require("@/assets/images/Homepage-min.jpg"),
          text: "Memories(3)"
        }
      ],
      slide: 0,
      sliding: null
    };
  },

Update However, now I face another problem, the image does not fit the entire height of the screen when in mobile mode. I want it to be responsive. Here is a screen shot of my problem

Update 7/5/2019 I am still trying to fix this issue, can anyone help me with the CSS?

Have you set up the `@` alias for your image paths correctly in your webpack config or whatever build process you're using? What can you see in the console or the network tab of your developer tools? Does the client request the images in the correct place, under a wrong URL, or not at all? — Constantin Groß, May 06 '19 at 12:40
Hi, @Connum thanks for the reply! As I am new to programming, I am not sure what you are saying. What do you mean by "have you set up the @ alias for your image paths correctly". Just to give more context, I created this Vue project using the Vue CLI. — Issaki, May 06 '19 at 12:47
@Connum Furthermore, I learn to reference to my assets folder by referencing this stackoverflow post https://stackoverflow.com/questions/47313165/how-to-reference-static-assets-within-vue-javascript — Issaki, May 06 '19 at 12:48
When you open up the dev tools by pressing F12 in your browser, take a look at the console tab and at the network tab. You should see where the browser tries to locate the images and fails with a 404 error because it's not finding them. From there on, you should be able to fix the path by adding "../" to your image paths accordingly. — Constantin Groß, May 06 '19 at 13:02
Hi @Connum, At the Network tab, under Homepage.min.jpg, the browser returns 304 status code (Not Modified) — Issaki, May 06 '19 at 13:05
@Connum Perhaps you can also create a simple Vue project, add a random photo at the assets folder and give it a try? — Issaki, May 06 '19 at 13:07

score 0 · Answer 1 · answered May 06 '19 at 14:09

0

Try using img-src="https://xxxxx" instead of changing the style. You should get something like that in your code:

     <b-carousel-slide
        v-for="item in carouselItems"
        :key="item.id"
        :caption="item.caption"
        :text="item.text"
        :img-src=item.image
      ></b-carousel-slide>

Or you can just use an actual img tag inside the <b-carousel-slide>:

     <b-carousel-slide>
        <img
          slot="img"
          class="d-block img-fluid w-100"
          width="1024"
          height="480"
          src="https://xxxxxx"
          alt="image slot"
        >
      </b-carousel-slide>

You should also check your pictures 'path' since webpack adds a unique-id automatically to each image and can sometimes be troublesome in certain cases, just check that the webpack config is working on your images.

answered May 06 '19 at 14:09

Omer Tal

366
2
8

Hi, thanks for the reply! I removed the style and replaced it with the following :img-src=item.image and it still did not work. Also, how do you check your pictures 'path'? Furthermore, I've made an edit to my post, please check it out – Issaki May 06 '19 at 14:27
Okey so now the `img-src` works, the path just can't find the `@` part. I would suggest to just use relative-url so it will render properly. If that doesn't work you need to check how to change the webpack config to work with the `@`. – Omer Tal May 06 '19 at 14:33
Hi @Omer Tal, I finally solved my problem. I've updated my post. However, now I face another problem, where the image is not responsive and does not fit to the entire viewport when in mobile version. Furthermore, the text is also not aligned to the centre of the image. Can you help me? – Issaki May 06 '19 at 16:09
In the `` tag you can give the height and width: ```img-width="1024" img-height="480" ```So let's say for your case: `````` – Omer Tal May 06 '19 at 16:16

score 0 · Answer 2 · answered May 13 '19 at 23:15

0

<b-carousel> won't crop images, it tries to retain their native aspect ratio (the same as native Bootstrap V4.x carousel).

answered May 13 '19 at 23:15

Troy Morehouse

5,320
1
27
38

Cannot display images in Vuejs

2 Answers2