Vue 3 require 没有为 img src 定义

Question

当我在 Vue 3 中使用 require 时，在 vue 2 上一切正常

<img :src="require('./img/1.png')" />

我收到错误：

[Vue warn]: Unhandled error during execution of render function 
      at <Creator key=1 > 
      at <Character> 
      at <App>

Uncaught ReferenceError: require is not defined
      at Proxy._sfc_render (creator.vue:14:24)
      at renderComponentRoot (runtime-core.esm-bundler.js:895:44)
      at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5059:57)
      at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
      at setupRenderEffect (runtime-core.esm-bundler.js:5185:9)
      at mountComponent (runtime-core.esm-bundler.js:4968:9)
      at processComponent (runtime-core.esm-bundler.js:4926:17)
      at patch (runtime-core.esm-bundler.js:4518:21)
      at mountChildren (runtime-core.esm-bundler.js:4714:13)
      at mountElement (runtime-core.esm-bundler.js:4623:17)

只是文字文字文字文字文字

Answer 1

如果我正确理解Vite 文档，你应该能够执行以下操作：

<img :src="imageSrc" />
...
<script>
...
export default {
  ...
  computed: {
    imageSrc() {
      return new URL(`./img/${selectedItem}.png`, import.meta.url).href;
    }
  }
}
</script>