Vue DOM 图像无法正确显示

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


我使用标签在页面上放置了一个普通图像<img>,它在这里工作。仅当创建 DOM 元素时它才不起作用。我将路径硬编码在这里,以确保路径是正确的。


var img = L.DomUtil.create("img", "popUpImg", divImg);

img.src = '@/assets/pictures/1.png';


呼如林
浏览 53回答 1
1回答

叮当猫咪

使用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
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5