Question

我一直在与后端 Django 和前端 amp 进行项目合作；尽管我在链接两个标签（例如lightbox）时遇到一些麻烦。

我想在我的产品页面上获得第一张图像的列表（我已经完成了），并且通过单击图像，它在lightbox上向我显示了该对象的其他图像，而无需进行详细说明模板。

整个项目在GitHub上更新： https://github.com/lucasrf27/dealership

那是我正在尝试的amp代码。除了放在我的类别上之外，我还在test.amp.html上尝试使用此功能。（产品模板）

<body>
    <h1>lucas</h1>
    <div>
        {% for v in veiculos %}
        <h1>{{v.modelo}}</h1>
        <amp-img lightbox="cars" src="{{ v.first_image.imagem.url }}" width="" height="" layout="fill" alt="{{v.modelo}}">
            <amp-carousel lightbox="cars" width="350" height="350" type="slides">
    <div>
        {% for v in veiculos %}
        <h1>{{v.modelo}}</h1>
        <amp-img lightbox="cars" src="{{ v.first_image.imagem.url }}" width="300" height="400" alt="{{v.modelo}}">
            <amp-carousel lightbox="cars" width="350" height="350" type="slides">
                {% for p in veiculos.images.all %}
                <amp-img lightbox="cars" src="{{p.imagem.url}}" width="" height="" layout="fill" alt="{{v.modelo}}"></amp-img>
                {% endfor %}
            </amp-carousel>
        </amp-img>
        {% endfor %}
    </div>
            </amp-carousel>
        </amp-img>
        {% endfor %}
    </div>
    <!-- These will belong to a different lightbox gallery -->
    <div>
        <amp-img lightbox="another" src="image3.jpg" width="400" height="300" layout="responsive"></amp-img>
        <amp-img lightbox="another" src="image4.jpg" width="400" height="300" layout="responsive"></amp-img>
    </div>

当我在新的URL上打开lightbox中的图像时，

我得到这个： http://127.0.0.1:8000/veicles/image3.jpg（404）

但是图像在此图像中： http://127.0.0.1:8000/media/veiculos_imagens/bugat-logo-whatsapp-fundo-transparente3.png

是否存在某种media_prefix或类似的东西？

Answer 1

我愚蠢地得到了结果。除了在视图或模板上设置对象外，还像在first_image中那样在函数中设置对象，但第二个对象和其他2个对象它像：

template
<body>
    <h1>lucas</h1>
    {% for v in veiculos %}
    <amp-carousel lightbox width="1600" height="900" layout="responsive" type="slides">
        <amp-img src="{{v.first_image.imagem.url}}" width="200" height="100"></amp-img>
        <amp-img src="{{v.second_image.imagem.url}}" width="200" height="100"></amp-img>
    </amp-carousel>
    {% endfor %}

型号：

    def first_image(self):
        return self.images.first()  

    def second_image(self):
        return self.images.all()[1]

如果将来有人不了解该项目，请尝试访问： https://github.com/lucasrf27/dealership

使用Django在amp灯箱中设置画廊

1 个答案: