在图像上添加按钮（JavaScript）

Question

我正在构建一个博客应用程序，并试图在图片上添加按钮。我正在显示来自django database in javascript (HTML)的图像

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

views.py

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

template.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>标记