Добавление - кнопка на изображении ( JavaScript )

#javascript #python #html #django #django-views

Вопрос:

Я создаю блог-приложение и пытаюсь добавить кнопку на изображение. Я показываю изображение из 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>' , НО это не отображается на изображении.

Я понятия не имею , как я могу добавить кнопку на изображение.

Любая помощь будет признательна.

1. Чтобы было понятно, вы пытаетесь наложить кнопку на изображение ИЛИ кнопка должна быть изображением?

2. @Sid, Да, я хочу маленькую кликабельную кнопку на image

3. Пожалуйста, добавьте код, в котором вы пытаетесь добавить изображение в HTML

4. Я упоминал в вопросе, что Image is displaying through '{{ post.image.url }}' в теге <script>.

5. Это скорее вопрос css, проверьте эту ссылку: w3schools.com/howto/howto_css_button_on_image.asp

Ответ №1:

ваша проблема в BlogPost.buildTimelineItem вам нужно либо изменить его, чтобы включить кнопку, либо обработать результат и добавить кнопку вручную после того, как сообщение будет отрисовано. То, что вы пробовали, передает недопустимый URL-адрес, потому что функция принимает URL-адрес изображения, который, как я полагаю, отображается в <img> теге.

1. Сэр, я обновил вопрос, Можете ли вы сказать мне, как я могу это сделать ?

2. добавьте html, который генерирует элемент BlogPost.buildTimelineItem, что содержит элемент timelineItem? это объект html или js?

3. timelineItem является JS объектом, который содержит image и some other links and urls

4. если он содержит html, вы можете добавить туда кнопку, но если вы не обновите свой пост содержимым, я не могу быть более конкретным