Question

我正在尝试在Django中动态显示图像。这是我的详细信息页面

{% extends 'base.html' %}

    {% load staticfiles %}


            {% block header %}
                    <!-- Set your background image for this header on the line below. -->
                <header class="intro-header" style="background-image: url('{% static 'blog/img/about-bg.jpg' %}')">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                                <div class="page-heading">
                                    <h1>{{ post.title }}</h1>
                                    <hr class="small">
                                    <span class="subheading">blog detail</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </header>
            {% endblock %}

    {% block content %}
        <h1>{{ post.title }}</h1>
        <h4>{{ post.body }}</h4>
    {% lorem 5 p random %}
    <hr>

    <div id="disqus_thread"></div>
    <script>
    /**
    * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');

    s.src = '//eights.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
    </script>
    <noscript>Please enable JavaScript to view the
        <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a>
    </noscript>
    <script id="dsq-count-scr" src="//eights.disqus.com/count.js" async></script>
    {% endblock %}

到目前为止，我尝试存储这些方法。我尝试将其存储在数据库中

 {% static 'blog/img/about-bg.jpg' %}

 and called it like this
 style="background-image: url('{{ post.title }}')"

没用。然后我尝试将其存储在数据库中，如此

'blog/img/about-bg.jpg'

并像这样调用它

style="background-image: url('{% static '{{ post.title }}' %}')

然后我就把它存储在数据库中

static/blog/img/about-bg.jpg

并像这样调用它

style="background-image: url('{{ post.title }}')"

我也尝试在views.py

中定义它

pic = "path/pic.img"
context = {
   "pic": pic
context and calling it
{{pic }}

这些方法都不起作用。这与Laravel略有不同。在laravel

path/{{ post->title }}

会起作用。我怎么能在Django中这样做？任何和所有建议都是受欢迎的。为了清楚起见，我希望我的所有文章都在索引页面上显示图像，然后当我单击其中一个时，我将进入详细信息页面，显示该特定文章的图像

Answer 1

从您的问题我明白，动态是指您想要将图片上传到您的网站。因此，它不仅仅是一个静态图像，它总是与您的页面徽标或其他内容相同。

你必须这样做：

在models.py

中

from django.contrib.sites.models import Site
def generate_filename(filename): #it adds the image in a folder with the current year
    ext = filename.split('.')[-1]
    year = datetime.datetime.now().year
    return str(year) + '/' + str(int(time())) + '.' + ext
class PageWithImage(models.Model):
    image = models.ImageField(upload_to=generate_filename, blank=True, null=True)
    site = models.ForeignKey(Site, blank=True, null=True)#this if you want the image linked with your site

然后在setting.py中你必须添加：

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
MEDIA_ROOT = os.path.join(BASE_DIR, 'img')
MEDIA_URL = '/img/'

然后在模板中：

<img itemprop="image" src="http://{{ object.site }}{{ object.image.url }}">

不要忘记将图片字段添加到admin.py

Answer 2

我已经弄明白了。它应该存储为

/static/blog/img/about-bg.jpg

不

static/blog/img/about-bg.jpg

正斜杠使它工作。在Laravel这没关系

Answer 3

首先，你不能使用{％static＆＃39; blablabla＆＃39; CSS文件中的％}。

其次，使用此代码：

if(day==2 && ((hour >= 8 && min >= 30) ||(hour <= 13 && min <= 30))){
    $("#Tuesday").attr('id','open-hour')
}

第三，如果您将来使用模型中的图像，那么您的代码应该是：

style="background: url(/static/blog/img/about-bg.jpg) no-repeat"

Answer 4

使用Django动态将图像添加到您的网页：

由于我们主要使用Jinja作为模板，

 <img src="{%static 'images/beach.svg' %}" alt="A beach image">

我们提供了这类命令来访问静态图像文件。但是对于动态广告，如果我的“ views.py”函数类似于：

，则必须在上述HTML图像标记中将“ beach.svg”更改为{{dest2.img}}

def index(request):
    dest2 = Destination() // Imported class 'Destination()' from models.py .
    dest2.name = 'Beach'
    dest2.img = 'beach.svg' // The image name we need.
    dest2.desc = 'Some beach description'
    dest2.price = 2000

    return render(request, 'index.html', {'dest2' : dest2}) // Passing the object value to html page.

如果我们从逻辑上考虑，代码应类似于：

<img src="{%static 'images/{{dest2.img}}' %}" alt="A beach image"> // we cannot do this here!!!

我们不能在另一个Jinja代码中使用Jinja代码。因此，我们添加：

{% static 'images' as base_url %}

HTML页面顶部的

。 “图像”是图像的默认文件夹，在此HTML页面中，我们将其称为“ base_url”。因此，我们必须使用“ base_url”作为路径，并使用“ dest2.img”作为文件名。所以图片来源会像这样：

<img src="{{base_url}}/{{dest2.img}}" alt="A beach image">

所以最后我们完成了在Django中制作动态图像的操作！！！！

如何在Django中动态显示图像

4 个答案: