javascript - 如何将base64 url​​设置为图像src

标签 javascript typescript base64

实际上,我有一个使用 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/

相关文章:

node.js - Socket.IO 连接未建立

typescript - Typescript 中函数声明的可重用类型注释?

java - base64.java 图片转字符串

java - 从 hex64 转换为 base 64 字符串

javascript - jQuery keyup() 的问题

javascript - 如何将项目光滑网格添加到多选文本框?

javascript - 使用数据属性和 JavaScript 选择和更改表中的输入值

javascript - Node.JS 函数返回 http 响应值

typescript - 如何在 Typescript 中定义递归字符串文字类型

python - 解码python base64字符串