Vue框架-创建DOM图像时，该图像将无法正确显示

Question

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

我使用<img>标记在页面上放置了一个正常的img，它在这里有效。仅当创建DOM元素时，它才起作用。我在此处输入了硬编码的路径，因此可以确定该路径正确。

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

Answer 1

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

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

当您在Vue CLI中使用项目路径/文件名时，Webpack在捆绑时会重命名它们。如果在模板中使用字符串路径，则在使用img src时，Vue CLI会悄悄地解决此问题，但是当绑定到变量时，您需要Webpack的require来获取正确的路径和文件名。