0

Im currently working with vue.js and got into a problem.

My Boards.vue

<template>
<div class="boards_container">
    <div class="board_element" :key="board.id" v-for="board in boards">
        <img class="boardBanner" :src="board.image">
        <h2>{{ board.name }}</h2>
        <p>{{ board.rating }}</p>
        <p>$ {{ board.price }}</p>
    </div>
</div>
</template>

<script>


export default {
    name: 'Boards',
    props: {
        boards: Array
    },
    data() {
    }
}
</script>

The Body.vue where the Boards.vue is included:

<template>
<div>
    <img :src="surfer_banner" alt="Surfer on the ocean">
    <Boards :boards="boards" />
    <h2>catch every wave</h2>
    <img class="surfboardIcon" src="../assets/QUI_SurfboardIcon.svg" alt="SurfboardIcon">
</div>
</template>

<script>
import Button from './Button'
import Boards from './Boards'

export default {
name: 'Body',
props: {
    title: {
        type: String,
        default: 'Quiver'
    }
},
components: {
    Button,
    Boards,
},
data() {
},
created() {
this.boards = [
  {
    id: '0',
    name: "The Special Recipe Fish",
    rating: 4,
    price: 995.00,
    image: "/assets/board_1_image.jpeg",
  },
  {
    id: '1',
    name: "The Big Bueno Fish",
    rating: 4,
    price: 1050.00,
    image: "https://cdn.shopify.com/s/files/1/0203/7640/products/BBF_Fish_web_1200x.jpg?v=1570360599",
  }
]
}
}

keep in mid. The h2 and p tags are working. When I insert a online link into the image: element, the image is getting displayed.

To sum it up. These are working:

<img class="boardBanner" :src="../assets/board_1_image.jpg">

created() {
this.boards = [
  {
    id: '1',
    name: "The Big Bueno Fish",
    rating: 4,
    price: 1050.00,
    image: "https://cdn.shopify.com/s/files/1/0203/7640/products/BBF_Fish_web_1200x.jpg?v=1570360599",
  }
]
}

with

<img class="boardBanner" :src="board.image">

I want to do this, but it is not working:

this.boards = [
  {
    id: '0',
    name: "The Special Recipe Fish",
    rating: 4,
    price: 995.00,
    image: "../assets/board_1_image.jpeg",
  },
]

with

<img class="boardBanner" :src="board.image">

I tried different ideas already existing in this forum but nothing helped.

Falko
  • 33
  • 8
  • Does this answer your question? [How to import and use image in a Vue single file component?](https://stackoverflow.com/questions/45116796/how-to-import-and-use-image-in-a-vue-single-file-component) – Vucko May 12 '21 at 08:26
  • Actually no. The problem is not, that I can not display images at all. When I insert them directly in it is working like it should. But what is not working is inserting the path I saved in "image" in the "boards" model. – Falko May 12 '21 at 08:33
  • And to top that off, when the content of the model is a link pointing to an image in the web, it is working fine.... – Falko May 12 '21 at 08:34
  • We cannot help you without reproducible code. The code provided is correct. – tauzN May 12 '21 at 08:36
  • I can add the whole .vue file if you like? – Falko May 12 '21 at 08:37
  • remove "." from src. – Bulent May 12 '21 at 08:38
  • @Bülent you mean from the path like so "/assets/board_1_image.jpg"? That did not help. – Falko May 12 '21 at 08:41
  • @Falko `:src="require('@/assets/board_1_image.jpeg')"` – Vucko May 12 '21 at 08:45
  • But when I do it like that, I include the link directly as an html element. But I want to include the path from an object in the database. – Falko May 12 '21 at 08:46
  • @Falko then you need the absolute path: `:src="'https://domain.tld/storage/'+board.image"` – tauzN May 12 '21 at 08:52
  • I am using a local host to display the side for now. So my absolute path from the root directory would be quiver/src/assets/board_1_image.jpg and its also not working – Falko May 12 '21 at 08:55

3 Answers3

0

If you get the image URL from a database, you need to provide it with the absolute URL

:src="'https://domain.tld/storage/'+board.image"
tauzN
  • 5,162
  • 2
  • 16
  • 21
  • Well its not realy an sql database it is the data from the crated() function in the script of the .vue file. – Falko May 12 '21 at 08:57
0

I think you have a misunderstanding about a few things.

  1. :src means you want to pass a variable like :src="mainImagePath" There is no such think as :src="./assets/image.jpg" because it's not a variable.
  2. We don't use "." and ".." in HTML attributes, because HTML work with relative paths. Dot notation is only to give Javascript correct path, not for HTML
  3. Like someone suggested :src="require('@/assets/board_1_image.jpeg')" is also wrong because we are not trying to inject the file to the src. What we are doing is to give HTML the correct path where the file can be found.
  4. You need to give the relative path like src="/assets/iamge.jpg". If it didn't work as you mentioned, check if the image is there, name and extensions are correct.
// option 1: hard coded image path:
src="/assets/image.jpg"

// Option 2: source from variable
:src="image.path"

image: {
   path: "/assets/image.jpg"
}

If you still have a problem, open the DevTool and see what is the image path in HTML.

Bulent
  • 3,307
  • 1
  • 14
  • 22
  • so option 1 is working when I add the ../. The solution you have here does not give back an image. Option 2 is what I currently have and its not working. May I just give you all my code, so there can be seen every mistake? – Falko May 12 '21 at 09:03
  • 1
    I can look at it. – Bulent May 12 '21 at 09:07
0

I found the answer to my problem. I changed the location of my images from src/assets to public/images and now they can be found. Before the problem seems to have been that the location vue was searching in was the nodeModules folder.

Falko
  • 33
  • 8