无法在vue中显示图片

Question

我使用这个组件 SideMenu 来显示其他 SideMenuButton 组件，但是图像没有显示

侧边菜单：

<template>
    <div id = "side-menu">
        ciao
        <SideMenuButton imgPath="../assets/lens.png"/>
    </div>
</template>

<script>
import SideMenuButton from './SideMenuButton.vue'

export default {
    name: "SideMenu",
    components:{
        SideMenuButton
    }
}
</script>

侧边菜单按钮：

<template>
    <div>
        <img v-bind:src="imgPath">
    </div>
</template>

<script>
export default {
    name: "SideMenuButton",
    props:{
        imgPath: String,
    }
}
</script>

Answer 1

你需要像这样使用资产资源

<img src="@/assets/lens.png"/>

Answer 2

将图像作为道具传递并在孩子中使用 img 的require

侧边菜单：

<template>
        <div id = "side-menu">
            ciao
            <SideMenuButton image="lens.png"/>
        </div>
    </template>
    

侧边菜单按钮：

<template>
    <div>
       <img :src="require(`@/assets/${image}`)">

    </div>
</template>

<script>
export default {
    name: "SideMenuButton",
    props:{
        image: String,
    }
}
</script>

Answer 3

这种方法的问题在于， vue在后台使用 webpack 将所需资源（以及图像）捆绑到dist/目录中。 （简单的说）
这发生在buildtime 。

但是图像路径是一个变量，所以它可以在运行时改变。 Webpack 无法再确定图像。

<template>
  <div id="side-menu">
    ciao
    <SideMenuButton imgPath="imgPath"/>
  </div>
</template>

<script>
import SideMenuButton from './SideMenuButton.vue'

export default {
  name: 'SideMenu',
  components: {
    SideMenuButton
  },
  computed: {
    imgPath () {
      // webpack will replace the given path to import() with the actual "production" image path
      return import('../assets/lens.png')
    }
  }
}
</script>

您可能必须在应用程序的某个位置一次import()所有图像，以便 webpack 可以在构建时包含它们。

如果您想进一步阅读此主题：

• vue 相对路径导入指南
• 文件加载器（webpack 版本 5 之前）
• raw-loader（在 webpack 版本 5 之前）
• url-loader（在 webpack 版本 5 之前）
• 资产模块（自 webpack 版本 5 起）