VUE 3的要求未针对IMG SRC定义

Question

当我在vue 3中使用要求时，在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>

Answer 2

requient 是WebPack特定的功能，可以处理资产导入。

使用vite，它做的不同：

带有Vue Vite插件（您当然正在使用），您可以只使用内部的相对或绝对路径：src =“” Vite将其转换为引擎盖下的动态导入。因此，这对您来说是透明的。

<img src="./imgs/cat.jpeg" width="300px" height="50px">
<img src="~/assets/dog.jpg" width="300px" height="50px">

Answer 3

我刚刚切换到vue 3的webpack，需要再次工作