Python 使用AngularJS显示API中的图像（flask应用程序）_Python_Css_Angularjs_Image

Python 使用AngularJS显示API中的图像（flask应用程序）

python css angularjs image

Python 使用AngularJS显示API中的图像（flask应用程序）,python,css,angularjs,image,Python,Css,Angularjs,Image,我正在尝试展示我为一个排名应用程序制作的一些徽章图像。它的10个图像，应显示具体的每个司机我不是编码方面的专家，但我一直在寻找和研究解决我遇到的问题的方法我首先尝试使用以下代码将base64图像从API发送到浏览器：  for img in imglist: #loop for creating a list of base64 images from a list of image dir. imgcode =

我正在尝试展示我为一个排名应用程序制作的一些徽章图像。它的10个图像，应显示具体的每个司机

我不是编码方面的专家，但我一直在寻找和研究解决我遇到的问题的方法

我首先尝试使用以下代码将base64图像从API发送到浏览器：

<!-- language: python -->

for img in imglist: #loop for creating a list of base64 images from a list of image dir.
        imgcode = base64.encodestring(open(imgdir + img,"rb").read())
        imgcodelist.append(imgcode)

for driver in sortdriverList: #loop for taking drivers points and turn it into RANK img
            if (driver['Races'] < 21): 
                driver['Rank'] = str(imgcodelist[9])
[...]

第二个循环比这更长，但我在上面向你们展示的是，任何没有参加超过21场比赛的车手都是“非机密”徽章的一部分

我使用AngularJS尝试使用下面的代码显示base64图像

'<html>'

<td><img src="data:image/png;base64,{{ '{{driver.Rank}}'}}"></td>

[driver.Rank]应该是base64代码字符串。当我运行应用程序时，图像不会显示，相反，我会在表中看到图像的代码=/

然后我尝试使用下面的代码将[driver.Rank]转换为img src=的dir字符串

<!-- language: python -->

imglist = ["notclassified.png", etc...]
imgdir = "static/images/"  
for item in sortdriverList:
            if (item['Races'] < 21):
                item['Points'] = imgdir + imglist[9]

在我的HTML中，我将img src更改为：

'<html>'

<img src= {{ '{{driver.Rank}}' }}>

现在它显示了图像的目录。我一直在寻找CSS的方法使之成为可能

我还没有找到解决方案。

由于只粘贴了段，所以很难判断发生了什么，但我猜这与如何转义代码有关。也许你可以在chrome上粘贴生成的代码

有时看到一个有效的例子会有所帮助

角度。模块'App'，[] .控制器'DriverCtrl'，DriverCtrl；函数驱动rctrl$范围{ //base64编码1x1黑色像素 this.Rank='r0lgodlhaqabaaaauebaaacwaaaaaaaqaacakqbads='； } 等级：{{driver.Rank} 图片：

你在angular应用程序中尝试过ng src而不是src吗@是的！我也尝试过使用数据ng src，我注意到，我认为img应该是@Roomm，它做的是相同的=/。我用chrome检查页面，不知何故，ng绑定覆盖了img标签。我认为这可能会发生，因为我正在为AngularJS使用一个名为dir Paginate的即插即用插件。我对前端非常陌生。你的工作示例与我在互联网上看到的没有什么不同。我很高兴我能管理代码，现在一切都非常清晰。