Javascript 绑定图像未显示在Vue项目中

我有一个显示图像的组件：

<template>
    <div>
        <img :src="image" />
    </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    image: String
  }
}
</script>

但这没什么区别

我找到了答案，于是试着这样做：

<div>
    <img :src="getImage(image)" />
</div>

  methods: {
    getImage(path) {
      return require(path);
    }
  }

方法：{
getImage（路径）{
返回要求（路径）；
}
}

在组件内部。这将导致运行时出错：

找不到模块“./assets/image test.png”

完整堆栈跟踪：

runtime-core.esm-bundler.js?5c40:217 Uncaught Error: Cannot find module './assets/image-test.png'
    at webpackEmptyContext (eval at ./src/components sync recursive (app.js:1080), <anonymous>:2:10)
    at Proxy.getImage (MyApp.vue?059c:17)
    at Proxy.render (MyApp.vue?059c:3)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:710)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4193)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4176)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4134)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)

runtime core.esm bundler.js？5c40:217未捕获错误：找不到模块'./assets/image test.png'
在webpacketmptycontext（eval at./src/components sync recursive（app.js:1080），：2:10）
在Proxy.getImage上（MyApp.vue？059c:17）
在Proxy.render上（MyApp.vue？059c:3）
在renderComponentRoot（runtime core.esm bundler.js？5c40:710）
组件效应（runtime core.esm bundler.js？5c40:4193）
在反应性效应下（reactivity.esm bundler.js？a1e9:42）
at效应（反应性。esm捆绑机。js？a1e9:17）
在setuprenderefect（runtime core.esm bundler.js？5c40:4176）
挂载组件（runtime core.esm bundler.js？5c40:4134）
在processComponent上（runtime core.esm bundler.js？5c40:4094）

我也用@符号试过了

---

请有人给我指出正确的方向。我意识到Vue图像有一些怪癖（链接帖子上有这么说），但我不知道如何说服它绑定图像。

该图像应该在父组件中需要，并在脚本部分中定义，以便传输：

家长

从“/components/MyComponent.vue”导入MyComponent；
导出默认值{
名称：“应用程序”，
数据：（）=>({
img:require（“@/assets/logo.png”），
}),
组件：{MyComponent}，
};

MyComponent

导出默认值{
名称：“MyComponent”，
道具：{
图像：字符串，
},
};

如果将

require

放在模板部分，则会出现如下错误

错误：/src/assets/logo.png尚未传输。

---

映像是否已托管在服务器的

/assets

目录中？或者这是通过Webpack之类的构建管道来处理的？它已经托管在服务器上了-在这个特殊的情况下，它就是我的桌面-您正在使用Webpack吗？请在您的post或vue.config.js中更新它您是否尝试像

那样给出图像的路径？

image="@/assets/image-test.png">

<div>
    <img :src="getImage(image)" />
</div>

  methods: {
    getImage(path) {
      return require(path);
    }
  }

runtime-core.esm-bundler.js?5c40:217 Uncaught Error: Cannot find module './assets/image-test.png'
    at webpackEmptyContext (eval at ./src/components sync recursive (app.js:1080), <anonymous>:2:10)
    at Proxy.getImage (MyApp.vue?059c:17)
    at Proxy.render (MyApp.vue?059c:3)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:710)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4193)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4176)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4134)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)