JS new Image() 或 document.createElement("img") - 图像存在但不可见答案

【问题标题】：JS new Image() or document.createElement("img") - image is there but not visibleJS new Image() 或 document.createElement("img") - 图像存在但不可见
【发布时间】：2021-06-12 14:59:42
【问题描述】：

我有一个奇怪的问题。我有一个 JS 函数，它创建一个并在这个 div 中创建一个新的图像元素。我用这个函数调用

document.body.onload = buildCopy;

因此，在对文件进行测试时，一切都运行良好。但是，当我将脚本移动到托管在 Web 服务器上的实际站点时，图像不会显示。它就在那里 - 它在 DOM 上，我实际上可以拖动它，然后它在被拖动时变得可见，但图像本身似乎没有正确变红。

我尝试过同时使用 new Image() 和 createElement('img') 但它是一样的。

这里是创建图片的函数（copyDivs是另一个类为“c0py”的元素）：

// create the div that will encompass the entire clipboard image + tooltip
const createTooltipDiv = document.createElement('div');
// add class tooltip
createTooltipDiv.classList.add('tooltip');
// insert it right after the c0py element
copyDivs[i].parentNode.insertBefore(createTooltipDiv, copyDivs[i].nextSibling);
// save the tooltip div to a variable for later use
const tooltipDiv = document.getElementsByClassName('tooltip')[i];
// Let's create the clipboard image
const clipboardImg = document.createElement("img");
// Add the c0py-icon class which serves purpose for the onclick event later
clipboardImg.classList.add('c0py-icon');
clipboardImg.src = '/images/Clipboard.svg';
clipboardImg.alt = 'Copy this reference to Clipboard';
// Add it as a child of the tooltip div
tooltipDiv.appendChild(clipboardImg);

【问题讨论】：

标签： javascript image createelement

【解决方案1】：

好吧，事实证明，另一个 .css 或 .js 已经与 .tooltip CSS 类发生了冲突。我通过在空白页上尝试代码来了解这一点，然后我添加了更多外部/内部 css 文件和其他脚本，并慢慢深入了解它。因此，如果您遇到同样的问题，请查看竞争的 css/js 文件。太糟糕了，F12 开发工具中没有一个错误/交叉的 css 属性。

【讨论】：