Vue DOM 图像无法正确显示

Posted 2023-02-22

【中文标题】Vue DOM 图像无法正确显示

【英文标题】：Vue DOM image won't show correctly

【发布时间】：2020-08-02 15:53:52

【问题描述】：

我正在使用 Vue 框架并使用 DomUtil.Create 函数创建图像。在此图像中，我想将源动态写入此图像。但图像不会向用户显示。

我使用<img> 标签在页面上放置了一个普通图像，它在这里工作。只有在创建 DOM 元素时它才不起作用。我把路径硬编码在这里，所以可以确定路径是正确的。

var img = L.DomUtil.create("img", "popUpImg", divImg);
img.src = '@/assets/pictures/1.png';

【问题讨论】：

Vue Loader: Asset URL Handling

【参考方案1】：

使用require()

绑定到项目路径/文件名时，使用require:

require('@/assets/pictures/1.png');

如果您在 Vue CLI 中使用项目资产路径和文件名，Webpack 实际上会在捆绑时重命名它们。如果您在模板中为img src 使用字符串路径，Vue CLI 会悄悄地处理这个问题。但在任何其他情况下，您需要手动使用 Webpack 的 require 在运行时提供正确的路径和文件名。

^{- 注意：您可以npm run build 然后检查dist > img 文件夹以查看重命名。 -}

---

我可以在require() 中使用变量吗？

当使用变量路径/文件名时，require 需要一些帮助。您必须至少将路径的第一部分硬编码为字符串。

例如，这有效：

const filename = '1.png';
require('@/assets/pictures/' + filename); // <-- The string is needed

这也有效：

const path = 'assets/pictures/1.png';
require('@/' + path); // <-- This is good enough too

但这不会起作用：

const fullpath = '@/assets/pictures/1.png';
require(fullpath); // <-- No. Can't infer the path from a variable only

在Vue Loader 文档中了解更多信息

【讨论】：

感谢这工作！我有一个小的后续问题。如果我实现了 require(picturepath) 我将收到一个警告，即依赖项的请求是一个表达式。那么如何在 require 函数中实现变量呢？

不客气——为了让事情变得更复杂一点，require 需要一些帮助来解决这个问题，并且不能直接从变量中推断出来。仅将图像名称放入变量中并执行以下操作：require('@/assets/pictures/' + yourImgVariable)