Как смонтировать картинку base64 в моем приложении laravel? - PullRequest
0 голосов
/ 05 апреля 2020

Помогите мне смонтировать аватар в моем laravel приложении ..

mounted(){
    this.mountAvatar(this.form.avatar) ;
}

это у меня в методах

methods : {
            mountAvatar(e){
                let files = this.form.avatar;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },

        createImage(file) {
                let reader = new FileReader();              
                let vm = this;
                vm.form.avatar = file;
                reader.onload = (e) => {
                    vm.form.avatar = e.target.result;
                };
                reader.readAsDataURL(file);
            },
 }

  <div class="flex inline-block mt-2 mb-2">
                <div class="w-1/2">
                    <label for="avatar" class="block uppercase tracking-wide text-black-v2 text-xs font-bold mb-2">Update the photo of this criminal :
                    </label>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6" v-if="form.avatar">
                                <img :src="form.avatar = this.criminalAvatar" class="img-responsive" height="70" width="90" alt="Criminal Photo">
                            </div>
                            <div class="col-md-6 w-1/2">
                                <input type="file" name="avatar" id="avatar" v-on:change="onAvatarChange" class="form-control hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Мой form.avatar выглядит как

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZcAAAJsCAYAAAAx2+5KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhe7P0JtyVJch4GvtyzsqsJiWgsAucc6afql82ZkTij0VCUxGVAAARFDUECTWLpBY3uqsqXmfoWM3dzD4+4y7svl+r64lq4u7m5ubn5FhF3e3J3d/cBtMR/95Pfi9gaH1B6t7DA3A93Hz6YBNbYApxbOiILPFXu00idAamd9dmWUxYfg1qtGS1qnNa2U5Bdd3fP1JQsM9u5jychqpLUofT55WdIDzrRerd6yHlKobl9KPAE9FQEGdCTp0/vnoLIT38oLPFJS8esv4D6wkDZo/QC76Hjvarb13UIVtOOPUgoYxskjyZwbiS2suD4tYunT97jfGVbAk+ecOacN2923Hr35MM7aHgXKc7jiJ4Fy3+AFVnM/ZeVeV2oKp0T5xBjGZeCJsRZovdStynrkc6qFGCe9Ko80W26GE+sjbrSCiESbQxNFWR7HJGlShJVj8Zw0S2paFCNM99S9mNifw5AulXEeCasaRizXZAJpTnfNc8zj+kI/+//4k/EqmDeniU32Vw+fPAkcXtTGgXTvjgPjZlw8eayAgbEKWtPgVaEO4emXKb2vRbjLMR277fckCQcmD6CN+8+aHM5VfIUWH5fB3O4uSwlwm5OUVEMuqN+PMK15Qj6hxPKm4t5FwFVZy+4TWuor5qdjEc00HKwqI9msMcMy+zVYHjZe4+Qc+d6PHnyTLasMPt77X/0a9tc6F87mNZ9oLPPBXR7OYbPMPjlR6TUZ7MeZDh3hH3yIebOiNbnqsft7R4HtGqmV5GjtiZdDmlC0e6yUU9qHrmGbEVGtqcpaY0w6KPVJiFO8FXHVJ7nvc2Ffq02Oy4tIvulgz5UDviVomDLY+z/8a//TLwK5qwtAebNZRasO90aHpDqaIUjunE9rEgON5ZVfoVyd1sC3HRzAe10oLG1NaW5YDzJKx+mT7TLgO+gIGU/oDyXncOiyjthozqwLz5zDzFHuYXdqkTEvmBbKOCBt7LpyAqCZdZLIDEq3NPlcUZLVhILowaey8i/iK6kCWa7zUbtO8ZI1MQ7uF0lZwFasKinXVcBRWXHwrNqR7GdULsmm7lI1c2F6Vy49hawFTTasdERT3Hbnhsedbx/j5FcdM12JdizHmfrelnOGwvrWujAWOfGwnmjTVKNXdXFNkc04HXOsvYdKUYCQ2cZMnHHxggNjtStHGXcFqo5rafJF9n9vqm2ZpztQEQJ11uRMvFSXY45SD/8D3/878wrIH/PkmFzSaHTG0oHnadJjzJDgzNK43TYyIpM9bwxv6LJ7rYEuMHmwoakvftY52btmgLFllNtMzipU1ZmkEPGfknU4am0B5bEZNQtkCGLsp+gmzm6Bg8WwVLbOlMA9iwMKsWX4GbLerZFk9NzqGulj7x3uzWxfNW+rYka6N95YrKrhpJItDFQGssYiXfqT59hIe1ZV4C+0DLo5JXwRVnv34rNfFt0nMbc3T3uXh+6uaB3aQfqyEen4kOH7lxCF7krOwjOG/tkXa/6jiNWd2vBTMSipc0l2uDRtq1L9ZS2uahrZx3UHaxIx1ggMsImcdOcIEm/YIPuoZxRIBXRAG+CHeY6rH5S26vNU7mKLNdCHjlGxOt6Kyw+5SGZ7f+nf/LvzSsgf9eS//b3xs1laXQYuYKvJoEiQhVVD4vrcUoVKiC3OnIFyZAW5jVosT0S2EerPTaXY6zzWTNJdy0Q4XB1WpaDOpjXgbzwY/ohdTFr3x6U0XP7PXBAYlDFxFvBU6raoiobVLdeo0yFbGV/r/owxgGHtsfArCfL9LLSt1IFeq8J26VZrzWSA/2DDbMSaQ6TXIpwyQDY1KGpCObse6ZY57Pn+5vLDnsLLegP3FywaOxtLsQ8r+Y0G/wEPn3CO5f0JUM76Sy4D9CzssObS4XuXAZ/w4ZiBtO2izJJa6hnDtpLdNvnthZAJnMlXfwiW/hCOGgQu3NWm8sWxzJqrfwn9aVO+kQRQBUPfbLXPy7jskUT0u4bMyIMOFX0lbKKS/7J3f/7T/9P8wqYs7YE+L/95CcR6wi1wjgs1rBDuGxwUAYToAOkK57B7gJl9IZxJFdgnujImBS6EioK/ersoZ6V0oUh7tGIMuJBQ2QHGTmwmZs818t0+sp3hKFhUZ3qOwW/ccOIklv0SdZQ2kHoanJ0yIiQlf2TGNuSFxY6FAckGsJlJ+lXkVtQ3v6AzSHghYtAQU0gypizAf0Z7ciQoLiJ9kV8T0eBZUbBvWLWWXNpy/HsorTuApzcoJXcEwhoA4o4I6MdSGtzSW3dR0SNH2EeRa4DWlXeOpaaIOcR4fJtvO/gCTp3rGkE89jaLrPVJ4smNs1tZWhTvPEDbyica2X7+tg7Qla0tcMIz8Mghm1+BJQXvE1ftLUhSyBdCksXWej/pwfvzRllDECHauSLOkCcw//0T/7/zi9gdZNVHf9k3lzKYCD4BtD8JtAMmG5jJlBLVr474QN6ZHIgQydpmeymbaA6Tti6BxVlBPp1qzp0pHM7h7GaH4j6M4edstduS5EgMAkxJR3MYrgLSo5lR1BB5MtxC21gDQutdvmql/3CpWNlSS5EyEW4GfwAtfhDAOy9vZEyavdCtZXiI8D3uMKmtHJRqNfpMlycckFYIeUdUEGWTOJ5X4fqpn/YpuBVrHiJbd6xrZT3xrwGS+rN87pmsElTP+RCSUib+tdgTM1JO1pRWLboz31YZ5bIGgYNYO5rlCXK96OiteSpNYD+es7FVCkIpiEFVF+3BdWMUxelHUc9Y5y3uRDUtKfN7d5FGlb6zKg6U8dYT3Kfwh/wClSg94Nm8ALSjyQLQpYXODfZXDygijiUntpceKs6G6xBnECUao8nEidtJBbggOLbhUcD6zE3l1jO3IIjI+gvhThnfID1WCNzW80NVf3e5mR0u9ZAPnRZHc9FccGswX2ZXJbBoIv2bIAKpBWnwWWCrWMxjZF2rkgfda48U+pKf3zQOy5+b2DQoXxyOD3yOfdYi4WQI1lcyjRjoQtRlybhrKKZPwPysI2TLdMVyZ2xWqi5aR/B9pyAhIoeROd5Vufm2LdRHKfWC0V2btsxTo1F45TG9ph9B6yh7qUztIxiMz2SYVfMtfT+NE7ZIQ0nNpccS9a00sY6x3o3gF3r9bfqTD1jPcnl5vIUq6fuYKFLfTzo5BzY31ye8TEnwv/pz/4iMjqy1iVObS5q2GDIFr4qjUXjSBZq97rs1ERjDfzIrL6TsYPH3lzEOW6e60db1E7Et5sDGGB2jRQYhZRC1p6vEp7MYdcSzrOcYzO2tY9gc9wWaFkIerxYy+qjq2onstliTnmPlApJdMvos5oGpB0M3rl8uLtHyi0i+qIdNsSRaaKPaU4eyLBTSDHmGKS0aNVQIfUYT9sdQeeljgqVGsYTZTJd+Kh3LrtnSUO0IaHUXFdpjxeWSAjcKO1PsYe885Eaxpovh+9aNk1o6OatBTi+nqONDPeBETIVn/ucY+jok9gaaVDCzYzQmJvllYUTXh6TiYxTIGmGZXSebOvJqodgOnmGtXtz0R0MCidJMhzhO5dePrVw0+WHV6jnf/53f2lmAfkpu8Ef/e7vRiwA6TSV8OYSiSWQCe0cXNr9abjYUQjG18rnSZa43ebCWNR9AVpR6L92c2GbLYMz5Bi/enMB6Cvp28E5EzplGDMlep1HGtSNIC7stYxh7Yql+ux3JvByO2NAcyoiu35SRxLpN8ElZpDD9yjef8jNpeogKEGuj0xT1tXxZP5QPSBJ8LKEbV0hdcQZQrbDPGJdjnzn1PEvX0Q8wbpHrLxhpCWn3qeoqPplE17a8Bc6trYcwf12viUdWQs/Veby7scVKNtMXdkM1jOUPbW5zBjb6vrXFgTYj3hlMfVrLZAZMpinWRvTygxawTb4LsrzyC+HXWeWZ7rXQy79oc2F77nwgC38vpryaBcjsh3zW2MzWs448xXChnfv7/7lX/4M+SOO/dwMMrEu12iq5zW55IyWm04+BVWP0w6589zw7VEwJC7HA4vfFLTliIgMV6gyebE+0E7/yafytfNMfRlNar0MZYrhFJyCTPWFx3WTfC+iyQOGyXXzqjGp5anMaaoGdD7r14euC+UZB2ahQ7BOgKUUhq1iBDVbJ2IbvUggHWSwwj0yaplKxIp/NqGKJT8Jp3NJ7UMpRC8nnORHAf2kNMORKKw8SImUdh+0vkCO80b+SFl2TUb3/wyKNLHoK5VFrOa1NDK7fst3/TVdCZA8yjKKiaBPSkoXMywSQk43XqCkXXfOtR7Wj0tLRciJVOeHu3fYWPZAS0s1I/7od/9xxAzv4NE4QsmS3oCOpXnjnUteCdjgXn2Nj5CkowvoriXCDVgt7UgzD+1do5WAftk42AndIkX3gXpTZg47zCQrpBWryFQuRvuwXUeQBiqRWNUGhvjMGHX4U0zOEilB4VoeUJIWjOWFYPVP9/DcYywnF8tnIQy4hpHXY7xz8XsuKdlBKZRrdkZafcmo5d21jhO1Joa8ptPVXaRXoE+t4pT3R8yyzbcFOW8StO8IsiXaJrB9U5mqc4izdrz27lwugz1ZXHs20iIW1cWEUmPLLZP+7mEDouSR+LTSlxHnY/wkFR8SzV4siDFFV+Z7NXxzv7cd9pktHfRzcTviTDjHlA/XyG1KNE550Jb88ADLss6uI/UQiJd+ZNQ5fGKgd6yVau+9KEVbIag2kVgPalXd7E/rY/DHP93euaQVS/zRT8bHYlG9zgKiacYW5LsjlGKDm9EdtfI6sUeQv2vmo28uDXIwKdJCTBxHDxEXWLYh4oOqANWs5nNVv1e2w3YdIgbLHlQeA2/QozLvswkI8zHDaJFi8JUH+oQYB3mmY5ZdD7lat0VGXo95c/EETCKiDkDTUZOl8FRxUtfmNDgIkqsxRttXbSq46KdRgNTWtdJvEU0gXWcPY7PIjNbeBNo6+9nzMuKMTPFrNherCEWywn3GC6JLQS3qMsTcu9n/qZ8x6u005nYdzOPmUvNOg/1dNxducrTjAMiv42T85Fjaacg2HZFgvCUiR2kAxbIkx602lgjTK9vNJYF46UdGLYW2PXlOjvlhM0Pp5Hxnv+VagZBaVFtXd/nmsvkosusdEcas4Twa0qRW8jSegc4r7OcQdJQmgZMDxEOdORwOzT0B7dhhawcV9uG9i6iXMhysTb7aA0YmV2bOvMP6IO3hdgANlCMtKC+HFT30AQL70Q+TnrQva4666CrKld43lDSXdy/Evq32bQ1nePHhB5HRHk2CGVGHAmphBPpaXzLMeOp3Oichcf3mMqeJUceYok8jGlC6MMs60TAViVq7oGJTuaEeJFpScbb1vfp4F3OlgMtlfYggQZf03xFbFDoBltSdC3QxnuOlp1K3c+yf5LlGEvvPsZ53Cm3BjfPppwa2QZ+kAt694x11wiWt0hpnuD760HcRDdEmBrkW+ROQ5rPMuLn43K3NEJKIWrPrIukc9flMQLBtLCzfdeT84Ts2l28uvzduLptqI7qrQKBQL9NjHcflgWjEEcZaOuQyZdDFOSSvgzXMtnBY96F9Gu58lZmMYbIuGitbk3eOR/Zam1w+pz2ladbgtpqrGBYf3p/ugWPVw3aLzkVsdkaBLaS/tjLpL7alT7QZLvexNheO1zpkNWZKmgr3fGLQrwiKiKKl3lXpOnYStiOlFwKC861+jPPXmX3xsC67aQeS4kWo8YKi2hiClHkB2G8sJh3SOSJqiRQxph0nj+3hUsirdfNOI2VQXgMote1DEmjo8+d9c3G7R2gcRdsqPL5g7WJzaesPAr/PEheIEqO860xE7gYe1zjBMNfAC0XWaepzg0D/D2n7t8r825/+PGId1FtLDfgn5edf9rBbuPmEkZa4DmjEbj1ATqpVLe4bnih0pOU08o3dEW7f2dqj87JMhbgTU+ZfBerfL82c9VV+xWiMU12vYjB4d3OBWJscoapa1OLIa+O0ChR4OG8zyaHP2C+6czF7gssdby6JrMO81K8QJ20uTWaWJmKE1DHLeBeQnqpji6zQKULJ9OUBqoTqHDbt0Q6i6pzjTOni4WBzmSHvSA1D9xnr9E0LRooi1abT8Obiu59QM1ijWkrDmHaJCuc/ffIcfOZUDUeAHMT7vKT2g7ISR90o8yw+puvNZSwjX+Nlbs2z35jHTVCbhZPyY+qhDX4vJ8Z8lpk2F8pX7RWaN1wDQifvtNoYiHJOyfuKJexjg77/s7+68M7lvznxk/tR8w6s1o09FDyNAwcR2fGrWuyrbOaRltO41eZio2TYAHEnJVupc6EhHvE1OCjm+irY1vcbga5XrUb+ZnPJAQq0wQpQVbWoxcGP8Q1MQgHWsmoPOdRLWx++ucTEbrB/LK1c5aeMzr2oot6wYU1v0BAnpGuoZ4HZ7xBn/RdBBtUytCuigaF/1LZIsDbVyb+IOGNzoTCVU0ekeajfwM6N4eT1zAT3ew8RRLojaolUpOeGBvyN9NbIm0PjhX4DPeMvQCP9/v3izoUmUGjTGrLpe6+bDLOPOMa1WYD0aC6JR8jM42oeewOQleWJYXMp4PsuT+c5PuHP/9PfRKxj3OZmsKIjsocWRGT4aZGujS5Q7Hq6BQ70IOvWtZ1GrXEm9qKnoslxDpp2yQCxbal9rGQdQltWNKHKrqArWxITqaPSSVhwO7GQHsb5ApHV7fNSp99daXOlxnvai8iWcLIMn9knIa33G84l2oHQuky264jYjiiLlvSw8rf05OkzmIirdBCViI9CbQEEV5sLOwn1dJ3nkQyL0HWexpFM1X1LEmgqfQn0hTvtr1jxRvTxwEQGdYyU+C4O8pil4tYztyfpSMURWEzlV/jDMx6LnUJ/A+0BiAHaoETnpPbTtew29TzgMmS4EBTcPmo+SzvEOUFW1i4uVhdShgbVITwRj6CfdeAqsIvVRK464Q9+RG82vODITl3lIbQJigWNMGfdHnJIvGc59Z6LQYkstUa1WZIokhylD9qU9TPUe1po3CztBSISe0D+dqxdBn/UuypBf039PT9GmaH3XOJndVbQb0txY0E1fOTlNiMD6aybHnj3Hv0XKg6vpjcI+1HBe1Av2WMeGWN65XeCdy6p8xIriJW+CuaT/L4c4iSZsq2p9y3zxnyOL9+xJFERMqAnN2zdR7Q4QqavRNq3N6551/L0xC3nxXcu+pjbA2jrtlvBTk1SXRHuEY+Hg85f0YSDrMdxSHq6k9u7oo5V7kxenuoxNu9gXzkNKFDxCPfoFM6RsbWnsTfBWh0nbN2W99Ln+k2WzSVxjx6Oatd+nSs5ExqD8Jj8FgrahUVQ5XDSnEPGu/fvRfp2vRWKVnr26Rqkr2ck37pr+jI6hvxA4rrjhj8Aqe0UVnaeR7mJrfKEK5twfNlyA9C3dal7LKT+PVo77hqiyypN+XgN9ZI9QVfCC7oOLGiqR+VvKcBFQd8qQztWtLPQ3gqyJvx1DmjNTAmlYS+vGpcEiU2aZVB59f2sd4Aywy97FGCsp7ZQ2w/oJoAB5+idZSoZ2Zo1dfmjRfsW2Fo2IurSbcFjEZFhxynLKnzXwkU9yXcnlQxrxFaNdZTv2/CukHcQcy25EaeNj0GXg/Pr0eBNG85BmLs4aWX6Ec2unNPngGUe6nz/1ATbMpKfJ5N4l+SwUkXRdkCWuQRjLUegZFJNrawgqvxM5+N06crZk+w8+QinTpiUyBIxr5J4KJN5Ec7ghsM8bzx9E+oTPkpFNDlJPhkus100jvmdcKKWE3QZVAqnTvTKuVDpXaIejXeGc95UyZh7GtZ5LqrGuaaady3YPzjjVPuq9RnIXgi7pyp7mmtDxoBSHidyBOqiX/nJMH30OA4WbmtLBI+BbsnlYNld035/8Wdhl4DKNTl3TJQfV3l0XESJ9TPFicNkYVk3w65/z46O43x1a4jM9jjdl+QKlhEfQgw1KKPESl57frF7hZzIWbN1jjjd3oqFrOxFPTmIF3iPYsO3wCfQLubWfrA6lxG3FWfE1FiANoN2225QXW2f+qaOG2SNdlM2S/jsMoqK5bGaubYk7U4eIb6jA6wqc/oicw1Ol8VYk22U25EFex4DVdI5q5Z01I+a2xVVPjQo8ONnIYNWGXwRcdmT+aEvxZr4hOwDf1qTcDpBDTHKnFZl81wcU7uA2OyzROMiUjcNymfSdthOfRpzsqPOAyH7EOGc19oNPZs5qCS0wxBG5XvKT+o3oC4XbrAGQy0ZdMB+lGmfFlPeWAlT//Y//rUTBeSPNRXcbHPJGsDo3WBsnA3MjuTPPuy9VUuoEbhlGDSxszJc1LGB1FNuX9aLqLtmz5pN6cJI7TnglLVSBHv9t7D7aBM5wCZW30r/npEXYTGwG/gmKzf/NWiDJuHk/9SnLMXgD0XID/+WOtmO+kYsMbe3ltEZWRwTXQvL5PbRUfOzhsFvrsilwB8XlREsxp518Tn3Muz7PBE+izG5wqb/ZRJOaVorum+rNxcIhbI+lxh2RbbXMgSTJPpbOUgwbjW9vvbJtkivwDrHrwHUuhmbNKiuqjFlmzVOrgDReYwkkutP5EUCoHz7WZnwA9crpnODSdS1KOPWBS0ljzrSDn9ZEunIb/2qjSXf6wrvtL96WMP9NM7YaqPqmFQMbUD+qobV5nK8gt0AbnQedNntIZ1oMTspiWihgxuBSung9TFjK30u0ltrYmdbd6cR63LX0R6O85VzorjG+ifEvv+MozyaXulzQ47/AZWHhcKjaB+tXVI2UUy2HI0zEd0vTvfwEqy8m16vqwu149ACWYkZ5K813QJpDeua/Z55TWYCNwuZOJGlsRFwcS+UmrLNROPigkqf2kuCPIJGlsv+cS2PhcffXGC/G/S4yDoaZb23rB9KSt8eEE5BvlLo3XkemqIDmrBgeW6h3gPyyD4ggeEefb+Qi1OS8AU3VeM/KXgDav6CJFBpyOxkF/WNheQ8IvzJ5ab41rw4EGfeTAyQzRfilousgSywRziB9L2fR0IOkerjOU2IV8xoJiJjS6NHWbrGiYw5hXBae5xXD6ZbrUgwfBw8+ubyfYM7Z4+2h15BDTV+JTQhFZqEqEQ8TShFDgnnRwDtSGLw8Abbl50UlKPx82B6au45OFfu0VEN36OzQDnTsJjroBqEK3IuiH4+BUrsS0XtikB1hzPMH5ONWID2MKH0jWCLFwcySmo4OvbbejbkY4emfXsE+cGh4uLxdAKcEwfmhroSWSDzQJIoafF2HsX9sLl8AnDQPBjsz9rJQB+H687+OPBgTsrW6ioq6CpQnwMRz1mHSEdkBnEqjAvmlwPaekjsY/Vz0hZut8UkKmalyT+FcOIrIM+egXPlPgNoLCoYyBGGCwpI7hagj9sBVENYh6jfZ/AcXdPKngcqOgB1Nb1mJVQL8xTnqcsm7eGHzeWR4fHhRZXPP+viqjx0zoac/b1AaW7DqU0GLhgHb9IhOOg7uXBkfWT0+h9AR5DI2N4V/XaC7Z7JUKwnbwZe1uSY3hvbObcrNP8d/V7ih83lsaHBxs+oc3NxKPYRxUDcEPKOAJHHmDufBPx0WJIWSx37YB6/lyJZ3KY/PfGpmSNwXd6lkNmD823rQ8inT4wccAgVHQYgE51B31SjlQaZPyJ9SQEfAUZmCqRH6+ZpArdRTc9xJ3BGSHJ8Jp8uhzeV+C7KtLlkqnJb/Mr6Hg/VGyDZxzBIYGgKjy7xWW8u7IDsBDcjG3MOfSaQKba62pVW7lFrfCHxhYwxIxCdf84mdGvQmkPiZKsU/Iopexepc4VWlJETejYIxSoqP66pTbJK3Mgq3QAaMau6QDmarmtoxTnlsWgq6FflJrEyV7B5sK4SD8W7e2g9SXHx4gurScjlwiSKfLxMUbYTD5dgzKhhxgPUxQPsja2kWX4HbHsD4i6V5UHkNRmmkUPKOLjMtg9JGF... (274950 total length)"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...