时间戳

首页 > 解决方案 > vue.js jpeg 图像未找到

vue.js - vue.js jpeg 图像未找到

问题描述

我目前正在使用 vue.js 并遇到了问题。

我的 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>

包含 Boards.vue 的 Body.vue：

<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",
  }
]
}
}

保持在中间。h2 和 p 标签正在工作。当我在 image: 元素中插入一个在线链接时，图像就会显示出来。

把它们加起来。这些正在工作：

<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",
  }
]
}

和

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

我想这样做，但它不起作用：

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

和

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

我尝试了这个论坛中已经存在的不同想法，但没有任何帮助。

标签： vue.js

解决方案

我认为你对一些事情有误解。

  1. :src 意味着你想传递一个像 :src="mainImagePath" 这样的变量 没有像 :src="./assets/image.jpg" 这样的想法，因为它不是一个变量。
  2. 我们不使用“。” 和 HTML 属性中的“..”，因为 HTML 使用相对路径。点符号只是为了给 Javascript 正确的路径，而不是 HTML
  3. 就像有人建议:src="require('@/assets/board_1_image.jpeg')"的那样也是错误的，因为我们没有尝试将文件注入 src。我们正在做的是为 HTML 提供可以找到文件的正确路径。
  4. 您需要提供像 src="/assets/iamge.jpg" 这样的相对路径。如果它没有像您提到的那样工作，请检查图像是否存在，名称和扩展名是否正确。
// option 1: hard coded image path:
src="/assets/image.jpg"

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

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

如果仍然有问题，请打开 DevTool 并查看 HTML 中的图像路径是什么。

推荐阅读