Vue DOM 图像无法正确显示 [英] Vue DOM image won't show correctly
问题描述
我正在使用 Vue 框架并使用 DomUtil.Create
函数创建图像.在此图像中,我想将源动态写入此图像.但是图片不会显示给用户.
I'm using the Vue framework and creating an image using the DomUtil.Create
function. In this image I want to dynamically write the source to this image. But the image won't show to the user.
我使用 <img>
标签在页面上放置了一个普通图像,它在这里工作.只有在创建 DOM 元素时它才不起作用.我把路径硬编码在这里,所以可以肯定路径是正确的.
I put a normal image on the page using the <img>
tag and it works here. Only when creating the DOM element it doesn't work. I put the path hard coded in here so it is certain that the path is correct.
var img = L.DomUtil.create("img", "popUpImg", divImg);
img.src = '@/assets/pictures/1.png';
推荐答案
使用 require()
绑定到项目路径/文件名时,使用require
:
require('@/assets/pictures/1.png');
如果您在 Vue CLI 中使用项目资产路径和文件名,Webpack 实际上会在捆绑时重命名它们.如果您在模板中使用 img src
的字符串路径,Vue CLI 会悄悄地处理这个问题.但是在其他任何情况下,您都需要手动使用 Webpack 的 require
在运行时给出正确的路径和文件名.
If you use project asset paths and filenames in Vue CLI, Webpack actually renames them while bundling. Vue CLI quietly takes care of this if you use a string path for img src
in the template. But in any other situation, you need to manually use Webpack's require
to give the correct path and filename at runtime.
- 注意:您可以npm run build
,然后检查dist
>img
文件夹以查看自己的重命名.-
- Note: You can npm run build
and then check the dist
> img
folder to see the renaming for yourself. -
使用可变路径/文件名时,require
需要一些帮助.您必须至少将路径的第一部分硬编码为字符串.
When using a variable path/filename, require
needs some assistance. You must hard code at least the first portion of the path as a string.
- 例如,这有效:
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 文档中阅读更多内容
Read more in the Vue Loader docs
这篇关于Vue DOM 图像无法正确显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!