图像不显示在 VueJS 的组件中

Question

我正在学习如何使用 VueJS 并设法制作一个显示餐厅菜单的简单页面（在单个文件中）。

现在我正在使用 vue-cli 并重构我所做的事情：除了图像之外，一切都正常。

我的结构是这样的：

/node_modules

/public

/src

    /assets

        /picture.jpg

        /[...]

    /components

        /MenuItem.vue

    App.vue

    main.ts

在 src/App.vue 中：

<template>

[...]

         <ul>

            <MenuItem

              v-for="plat in plats"

              :name="plat.name"

              :price="plat.price"

              :url="plat.url"

              :role="role"

              :plat="plat"

              :supprimer="supprimer"

              :key="plat.name"

            />

         </ul>

[...]

</template>

<script>

import MenuItem from './components/MenuItem'

export default {

  name: 'App',

  components: {

    MenuItem

  },

  data() {

    return{

      plats: [

        {name: "Steak de boeuf", price: 5.99, url: "/assets/steak.jpg"},

        {name: "Coq au vin", price: 8.99, url: "/assets/coq.jpg"},

        {name: "Gencives de porc", price: 12.99, url: "/assets/porc.jpg"},

        {name: "Entrée", price: 4.99, url: "/assets/entrée.jpg"},

        {name: "Plat du jour", price: 14.99, url: "/assets/plat.jpg"}],

[...]

</script>

在 src/components/MenuItem.vue 中：

<template>

    <li class="plat">

        <img :src="url"/><p> {{ name }} - {{ price }}€</p>

        <p v-if="role=='admin'" @click="supprimer(plat)"> Supprimer le plat </p>

    </li>

</template>

<script>

export default {

  name: 'MenuItem',

  props: ['name','price','url','role','plat','supprimer']

}

</script>

我认为这可能是因为图片的路径，但我尝试了绝对/相对路径，但没有任何效果。我尝试将路径更改为“./assets/...”、“./src/assets/...”等，因为我不确定vuejs从哪个位置搜索图片。

当我运行代码时，一切都显示正确，除了图像被“未找到图像”符号替换：

结果

Answer 1

这取决于您保存图像的位置。在您的情况下使用require路径src：(@)plats: [    {      name: "Steak de boeuf",      price: 5.99,      url: require('@/assets/steak.jpg')    }]

Answer 2

正如阿尔伯特在评论中所说，您至少有两种加载图像的方法：删除斜杠（例如， ），或者更好的是，通过在相对路径之前assets/foo.jpg添加一个来链接它们，例如：&nbsp;;&nbsp;简而言之，加载相对路径，例如如果你想链接Bootstrap，而代表.@@/assets/foo.jpg~/node_modules/@/src/

Answer 3

这是因为 v-bind 中的表达式是在运行时执行的，而 webpack 别名是在编译时工作的。尝试像这样包装你的网址require：{name:&nbsp;"Steak&nbsp;de&nbsp;boeuf",&nbsp;price:&nbsp;5.99,&nbsp;url:&nbsp;require("assets/steak.jpg")}