时间戳

首页 > 解决方案 > Vue DOM 图像无法正确显示

javascript - Vue DOM 图像无法正确显示

问题描述

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

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

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

标签： javascripthtmlvue.jswebpackvue-cli

解决方案

利用require()

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

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

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

-注意：您可以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文档中阅读更多内容

推荐阅读