簡體   English   中英

如何將base64 url​​設置為圖像src

[英]how to set base64 url to image src

實際上,我有一個使用angular-cli的圖像:

<img src="" style="width: 120px; padding-top: 10px" alt="" id="dishPhoto">

和Base64圖片網址imgUrl 所以我想設置img src:

let img = document.getElementById('dishPhoto');
img.setAttribute('src',this.imgUrl);

但我得到一個錯誤:

document.getElementById(...)為null

你能幫我解決嗎?

您需要確保代碼元素加載運行(如果腳本位於<head>標記中,則該元素實際上還不存在)。

並且,如果還不存在,則需要在圖像的數據元數據之前添加: data:image/png;base64,取自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"> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM