实际上,我有一个使用 angular-cli
的图像:
<img src="" style="width: 120px; padding-top: 10px" alt="" id="dishPhoto">
和 Base64 图片 url imgUrl。所以我想设置 img src:
let img = document.getElementById('dishPhoto');
img.setAttribute('src',this.imgUrl);
但是我得到一个错误:
document.getElementById(...) is null
你能帮我解决一下吗?
最佳答案
您需要确保您的代码在元素加载后运行(如果您的脚本在您的 <head>
标记中,则该元素实际上还不存在)。
如果它不存在,您需要为图像添加数据元数据:data:image/png;base64,
(taken from including images in CSS)。
这是一个工作示例。
var imageData = 'iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMi8yMi8xMq6ePc8AAAAgdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIE1Yu5EqJAAABOhJREFUeJzFVltIVGsU/mbvPcpsEM3ByjKtHGhwm9CLGuGlwC6gkFAk9GIK4oMghAphiBC9CAYhEwXRW0GZPitW9JKXh7wkjoqWZShoXiebcdqz5zsP57jPMbfjbxfOgvWw1/+t7//2+i/rtwEg/mdTfiYpISEBsbGx2LNnD2JiYuDz+bCysoKVlRUsLCz8lBCK+N69e1leXs7nz59zaWmJVrawsMCnT5+ytLSUTqdTiBcAbdhhOVRVRVVVFa5fv459+/YBAKanpzE8PAyv14tQKAS73Y709HRomoZDhw4BAGZmZnDnzh3cu3cP6+vrP1+JjIwM9vX1kST9fj9bWlqYk5NDh8NhiVdVlfn5+fR4PAwGgyTJ7u5uapq2UzWsBy5cuMDFxUWSZGtrK91ut3B5AVDTNLa3t5Mk5+bmePr06d2JyMvLYyAQIEnW19fvavIfvaGhgSS5vLzMzMxMMRFHjhzh58+fSZLV1dW/JGDD6+rqSJJTU1M8ePDgziI2StjU1PRbBGz43bt3SZJPnjyJLOLcuXMkyYGBASqKIkRus9mEcKqqcnR0lCSZk5NjLUKSJHZ0dJAkCwsLhSb3eDzs7e1lWVmZkJArV66QJNva2qxFuFwuGobB4eFhSpIkRNrf30+SvHXrlhDebrdzcnKSuq4zOTnZjEv4x86fPw9JktDa2opwOAwR+/btGwAIXUYAoOs6nj17BkVRUFBQYMZNEW63GwDQ09MjRAgAoVAIABAIBIRzNvgzMjLMmNnAjh49Cl3XMTIyYpnsdruRnJwMXddBEpIkIT4+3hzLzc2FLMuw2WwAgLdv32J1dXULz7t372AYBpKSkjbF6XA4OD4+zuXlZcbHx1uu5+PHjy2b1nZ25swZSx6n08m1tTW+ePFi856QJAnR0dEIh8MgaVkJWZYj1/kX8Arw98b6+PEjsrKyEBUVZQlsbGzEgwcPYBgGwuEwZFmGx+OBpml49OgRHj58CLvdDgCw2WwYGhqy5FFVFdHR0fj69etmEYZhYHx8HHl5eUhNTcXc3NyW5LGxMYyNjW2Kzc/PQ9M0jIyMCG9oTdOgKApmZmbMmHk63r9/DwA4efKkEBkA888dDodwTmZmJgBgdHR0q4iOjg4AQHFx8a5FKIrYK1GSJFy8eBEA0NnZuVWE1+tFT08PTp06hdzcXCFSn8+HQCAAv98vhD979ixOnDiBly9fYmpqatOYeVRKSkpIkq9evRK6hhMTE+lyuRgTEyPUa968ebNdb/r3Q1EUvn79miRZU1PzW1r4htfX15Mku7q6rHrTZvDx48e5trZGXdeFuqmIFxcX0zAMLi0t8dixY1aYrUlXr14lSa6vr/Py5cu/JKC0tNR89F66dGk7nHVyRUWFeQU3NzczNjZ2V5M7nU62tLSYHNeuXYuE356oqKiInz59IklOT0+ztraWhw8fjviaSk1N5Y0bNzg7O0uSnJiYYEFBQeRNu6FkO9u/fz9u3ryJyspKyLKMUCiEvr4+dHd3w+fzQdd12O12xMXFITs7G9nZ2ZBlGcFgEPfv38ft27fx5cuXSFMgYiX+62lpaWxsbOTQ0BC/f/9u2TmDwSAHBwfZ0NBAl8slvHQ7VuJHi4qKwoEDB5Ceno6UlBSoqgq/348PHz7A6/VidnYWuq7vhhK7FvEnTNoZ8uftL3UtYp92IkqzAAAAAElFTkSuQmCC'
var img = document.getElementById('dishPhoto');
img.src = 'data:image/png;base64,' + imageData;
<img src="" id="dishPhoto">
关于javascript - 如何将base64 url设置为图像src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47484558/