未为 img src 定义 Vue 3 要求答案

【问题标题】：Vue 3 require is not defined for img src未为 img src 定义 Vue 3 要求
【发布时间】：2022-10-04 21:10:29
【问题描述】：

当我在 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)

只是文本文本文本文本

【问题讨论】：

我不明白这样做的目的。为什么不使用 <img src="/img/1.png" />？看起来 require 是您未在“设置”中定义的一些功能
它特定于您的 vite 设置，而不是专门针对 vue。
我使用静态路径来简化问题，底线是我需要动态导入。 <img :src="'./img/' + selectedItem.img" />

标签： vue.js vue-component vuejs3 vite

【解决方案1】：

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

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

【讨论】：

这完美地工作。尽管如此，还是太糟糕了，不得不这样做。

【解决方案2】：

require 是处理资产导入的 webpack 特定功能。

使用 vite，它的做法不同：https://vitejs.dev/guide/assets.html#importing-asset-as-url

使用 vue vite 插件（您肯定在使用），您可以在 :src="" 中使用相对或绝对路径，并且 vite 将在后台将其转换为动态导入。所以它对你来说是透明的。

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

【讨论】：

我需要动态导入。 <img :src="'./img/' + selectedItem.img" />

【解决方案3】：

我刚刚切换到 vue 3 的 webpack 并要求再次工作

【讨论】：