图像不显示在 VueJS 的组件中

Posted 2023-02-23

【中文标题】图像不显示在 VueJS 的组件中

【英文标题】：Images don't show in Components in VueJS

【发布时间】：2020-06-29 17:18:52

【问题描述】：

我正在学习如何使用 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 是从哪个位置搜索图片的。

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

result

【问题讨论】：

我认为文档应该对您有所帮助vue-loader.vuejs.org/guide/asset-url.html#transform-rules

我阅读了这个文档，我明白“/assets/picture.jpg”应该在这里工作

【参考方案1】：

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

【参考方案2】：

这取决于您将图像保存在哪里。在您的情况下使用require 和src 路径(@)：

plats: [
    
      name: "Steak de boeuf",
      price: 5.99,
      url: require('@/assets/steak.jpg')
    
]

【讨论】：

谢谢！我不明白我必须使用require + @，这现在可以工作了！

【参考方案3】：

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

尝试将您的网址包装在 require 中，如下所示：

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