{"id":1031,"date":"2022-09-08T19:37:58","date_gmt":"2022-09-08T17:37:58","guid":{"rendered":"https:\/\/alessandromasciadri.com\/?p=1031"},"modified":"2022-09-08T19:49:45","modified_gmt":"2022-09-08T17:49:45","slug":"come-mostrare-immagini-in-una-pagina-html-con-python-flask","status":"publish","type":"post","link":"https:\/\/alessandromasciadri.com\/come-mostrare-immagini-in-una-pagina-html-con-python-flask\/","title":{"rendered":"Come mostrare immagini in una pagina HTML con Python Flask"},"content":{"rendered":"\t\t<div data-akihiro-type=\"ama-post\" data-akihiro-id=\"1031\" class=\"akihiro akihiro-1031\" data-akihiro-post-type=\"post\">\n\t\t\t\t<div class=\"akihiro-element akihiro-element-4859d89 e-flex e-con-boxed e-con e-parent\" data-id=\"4859d89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"akihiro-element akihiro-element-04d6c7e akihiro-widget akihiro-widget-text-editor\" data-id=\"04d6c7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Nel caso fosse necessario eseguire il rendering di un&#8217;immagine in una pagina HTML che gestiamo con il web framework Flask, ci sono pochi accorgimenti da seguire.<\/p><p>La prima cosa da tenere in considerazione \u00e8 che tutti i file statici di un progetto Flask sono contenuti nella cartella denominata <code>static<\/code>. In questa possiamo tranquillamente creare delle sotto cartelle al fine di suddividerne meglio il contenuto, per esempio <code>img<\/code>, <code>css<\/code>, <code>json<\/code> e cos\u00ec via.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-a51e43d akihiro-widget akihiro-widget-heading\" data-id=\"a51e43d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t<h3 class=\"akihiro-heading-title akihiro-size-default\">Includere immagine in HTML con Flask<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-d570e66 akihiro-widget akihiro-widget-text-editor\" data-id=\"d570e66\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A questo punto possiamo direttamente andare al poco codice necessario. All&#8217;interno di una pagina HTML inseriamo il seguente tag &lt;img&gt;, dove nell&#8217;attributo source indichiamo tra doppie parentesi graffe {{}} il percorso del file incapsulandolo nella funzione url_for().<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-fe711ee akihiro-widget akihiro-widget-code-highlight\" data-id=\"fe711ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html \">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><img decoding=\"async\" src=\"{{ url_for('static', filename='img\/nice-pic.jpg') }}\" class=\"card-img-top\" alt=\"Foto molto bella\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"akihiro-element akihiro-element-3a1fdbc akihiro-widget akihiro-widget-text-editor\" data-id=\"3a1fdbc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"akihiro-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ricordiamoci che nel caso in cui il file si trovi in una sottodirectory \u00e8 sufficiente indicare il percorso completo usando il parametro filename.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nel caso fosse necessario eseguire il rendering di un&#8217;immagine in una pagina HTML che gestiamo con il web framework Flask, ci sono pochi accorgimenti da seguire. La prima cosa da tenere in considerazione \u00e8 che tutti i file statici di un progetto Flask sono contenuti nella cartella denominata static. In questa possiamo tranquillamente creare delle [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[28,12],"class_list":["post-1031","post","type-post","status-publish","format-standard","hentry","category-programmazione","tag-flask","tag-python"],"_links":{"self":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/1031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/comments?post=1031"}],"version-history":[{"count":4,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1035,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/posts\/1031\/revisions\/1035"}],"wp:attachment":[{"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/media?parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/categories?post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alessandromasciadri.com\/ama-json\/wp\/v2\/tags?post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}