在图像上添加 - 按钮（JavaScript）

Question

我正在构建一个 BlogApp，我正在尝试在 Image 上添加按钮。我正在显示来自django database in javascript (HTML) 的图像。

我正在尝试在图像上添加可点击按钮。

views.py

def user_stories(request):
    posts = BlogPost.objects.filter(user=request.user)

模板.html

    <script>
        var blogposts = new BlogPost('blogposts', {
            blogposts: [
                // {% for post in posts %}
                BlogPost.buildTimelineItem(
                    '{{ post }}',
                    '{{ user.profile.file.url }}',
                    '{{ post.user }}',
                    '{{post.id}}',
                    timestamp(),
                    [
                        [
                            '{{post.id }}-1',
                            'photo',
                            3,
                            
                            '{{ post.image.url }}',                   
                            '',
                            false,
                            false,
                            timestamp(),
                        ],
                    ]
                ),
                // {% endfor %}
            ],
        });
    </script>

  BlogPostJS.buildTimelineItem = (id, photo, name, link, lastUpdated, items) => {
    const timelineItem = {
      id,
      photo,
      name,
      link,
      lastUpdated,
      items: []
    };

    each(items, (itemIndex, itemArgs) => {
      timelineItem.items.push(BlogPostJS.buildBlogPostItem.apply(BlogPostJS, itemArgs));
    });

    return timelineItem;
  };

{{ post.image.url }} 正在显示图像，我正在尝试添加它。

• 我也尝试添加：- '{{ post.image.url }}<button type='submit' </button>'，但它没有显示在图像上。

我不知道，如何在图像上添加按钮。

任何帮助将不胜感激。

任何帮助将不胜感激。

Answer 1

您的问题出在 BlogPost.buildTimelineItem 中，您要么需要修改它以包含按钮，要么对结果进行后处理并在呈现帖子后手动添加按钮。您尝试的内容传递了一个无效的 url，因为该函数接受图像 url，我认为它被呈现为 <img> 标记。