在本地运行Flask.我想根据JavaScript生成的名称显示图像

Question

我正在使用d3和Flask在我的浏览器中显示树形图.整件事在当地储存和运营.

当用户将鼠标悬停在树形图中的每个节点上时,我想显示相关图像.

对于树形图所基于的JSON数据,我使用的是url_for和我的静态文件夹,如下所示:

d3.json("{{ url_for('static', filename=json_data) }}", function(error, flare) {
    // Lots of code

包括d3的同样的事情:

<script src="{{ url_for('static', filename='d3.js') }}"></script>

但是,当我想要在悬停时出现的图像时,我使用JSON中的数据来创建图像的名称.由于这意味着使用JavaScript变量而不是python,我无法看到如何使用url_for显示它.

作为替代方案,我尝试使用一系列不同的绝对和相对路径,但没有任何工作.我读过一些关于Firefox不想显示本地文件的内容,但这肯定不适用于我的计算机上运行的东西？我可以在浏览器中正常显示大量本地文件.不管怎样,我安装了一个名为LocalLink的附加组件.这是我尝试使用此方法的代码:

var img_path;
d3.selectAll( ".node" ).on( "mouseover", function(d) {
  img_path = "{{ image_path }}" + d.name + ".png";
  document.getElementById('thumb').src=img_path;
  document.getElementById('thumb').style.display='block';

这里,python image_path变量是r"file:/// C:/ Python27/my/app/folders/etc /"的行.

这几乎可行.图像不会出现在悬停状态,但如果我使用Firebug并将鼠标悬停在HTML中的相应标记上,则正确的图像会显示为光标旁边的缩略图.

我尝试创建一个简单的HTML页面,其中的图像引用了"file:/// ....."位置.这样可行.这让我觉得Flask是这个方法的问题.对于Web位置的绝对路径似乎没有问题(我已经测试了它,并且它可以工作),所以我猜测Flask不喜欢本地文件位置的绝对路径.

因此,有多种可能性可以解决这个问题:

• 有一种方法可以将url_for与JavaScript中生成的变量一起使用.
• 有一种方法可以将信息传递回python变量并在url_for中使用它.
• 有一种方法可以让Flask使用"file:/// ....."格式显示这些图像.

还有其他方法吗？

我考虑过的唯一另一个选择是将整个事情移到网上.但是,我对Python托管不是很熟悉,而且这个应用程序使用Twisted和PyQT.我不知道如何在服务器上安装它们.我甚至不知道我构建的是否可以在线工作 - 你可以在现场网站上使用Twisted或PyQT吗？我对Twisted甚至做什么都有一种模糊的感觉.

如果人们认为这是我最好/唯一的选择,我将详细解释我的应用程序是如何工作的,但在此之前我不会把事情弄得乱七八糟.

Answer 1

我假设你在本地运行Flask应用程序(在你的浏览器中,你输入类似的东西localhost:8000).

首先,你需要了解url_for它的作用.它可以帮助您生成HTML需要加载的静态文件(在您的情况下,图像或javascript源文件)的URL.所以,当你有......

<script src="{{ url_for('static', filename='d3.js') }}"></script>

...模板引擎实际上将其转换为......

<script src="/static/d3.js"></script>

如果您愿意,您可以在模板中输入上述内容(但是如果您需要将路径更改为/ media而不是/ static,则使用url_for非常有用:现在您只需要在一个地方更改它而不是改变你的所有链接).

所以,这意味着当你运行Flask并使用上面的HTML加载页面时,浏览器知道在"localhost:8000/static/d3.js"中找到d3.js脚本.浏览器向服务器(您的烧瓶应用程序)发送请求,Flask识别出它正在查找静态文件(因为路径/static以此开头)并返回存储在static项目目录中的d3.js文件.

现在,假设您的/static目录中有一个名为的文件static/images/img1.png.要显示此信息,您需要生成与此图像相关的URL(可能是/static/images/img1.png).在Flask中,您通常会键入:

<img src="{{ url_for('static', filename='img/img01.png') }}"></img>

......这会转化为......

<img src="/static/img/img01.png"></img>

如果您愿意,可以输入此URL.因此,您的JavaScript可以生成此URL,它可以工作.

现在,也许你已经知道了这一点,但是为什么你不能做出类似的事情file:///C:/Python27/my/app/folders/etc/.首先,你说Flask没有像你期望的那样处理这个请求.嗯,那是因为Flask根本没有处理这个请求!请记住,Flask正在运行类似的东西localhost:8000.如果您键入<img src="file:///C:/Python27/my/app/folders/etc"></img>,则浏览器不会发送检索此文件的请求localhost:8000,它正在尝试使用浏览器在本地检索文件.同样,如果您的页面上有链接google.com,您的浏览器不会将点击该链接的用户发送到您的烧录应用程序,他们会将它们发送给Google!

出于安全原因,如果您连接到不是本地站点的网站(例如,example.com/index.html而不是file:///home/mark/index.html),Firefox将不允许您直接从磁盘访问文件.这是有道理的,因为否则将转到example.com,网站可以将您硬盘上的任何文件加载到网页中,javascript可以访问该网页,然后将该文件的信息发送回网站!

它恰好localhost:8000被认为是浏览器的非本地站点.因此,Firefox不允许您file:///...从该页面访问这些资源.

因此,这不是Flask的问题:这是使用浏览器执行浏览器不想做的事情的问题.

现在,您的解决方案究竟取决于您的应用程序的需求.最直接的解决方案是使您想要显示的图像位于/static项目目录中.

但是,如果您想创建一个Flask项目来处理放在硬盘驱动器上任何位置的文件(没有先从"上传"页面选择文件),您可能会选择错误的工具(网络 - 基于应用程序)的工作.