图像不显示在 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添加一个来链接它们，例如： ; 简而言之，加载相对路径，例如如果你想链接Bootstrap，而代表.@@/assets/foo.jpg~/node_modules/@/src/




Answer 3

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

尝试像这样包装你的网址require：

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