Javascript 图像不'；无法在VueJS中的组件中显示

我正在学习如何使用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>

[...]


[...]
从“./components/MenuItem”导入MenuItem
导出默认值{
名称：“应用程序”，
组成部分：{
梅努伊特姆
},
数据（）{
返回{
平台：[
{名称：“牛排”，价格：5.99，网址：“/assets/Steak.jpg”}，
{名称：“Coq au vin”，价格：8.99，网址：“/assets/Coq.jpg”}，
{name:“Gencives de porc”，价格：12.99，网址：“/assets/porc.jpg”}，
{名称：“Entrée”，价格：4.99，网址：“/assets/Entrée.jpg”}，
{名称：“Plat du jour”，价格：14.99，网址：“/assets/Plat.jpg”}，
[...]

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

{{name}}-{{price}}

供应商平台

导出默认值{
名称：“MenuItem”，
道具：['name'，'price'，'url'，'role'，'plat'，'supplier']
}

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

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

---

正如Albert在评论中所说，加载图像至少有两种方法：删除斜杠（例如，

assets/foo.jpg

）或者，更好的方法是，在相对路径之前添加一个

@

，比如：

@/assets/foo.jpg

；简而言之，

加载

/node\u modules/

相对路径，例如，如果您想链接引导，而

@

代表

/src//code>
，这取决于您保存图像的位置案例与
src
路径
（@）
：

这是因为v-bind中的表达式是在运行时执行的，而Web包别名在编译时工作

尝试在
require
中包装您的url，如下所示：

{name:“Steak de boeuf”，价格：5.99，url:require（“assets/Steak.jpg”）}
我认为文档应该对您有所帮助。我阅读了此文档，并且我理解“/assets/picture.jpg”应该在这里工作。谢谢！我不知道我必须使用require+@，它现在正在工作！
plats: [
    {
      name: "Steak de boeuf",
      price: 5.99,
      url: require('@/assets/steak.jpg')
    }
]