title: How to display images with AJAX request - Django
body: <p>I am trying to build a search suggestion dropdown with AJAX but I dont know how to get my images to be displayed after ajax request in <strong>template</strong>
  Here is the code:</p>
  <p><strong>html</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;form class=&quot;search&quot; method='get'&gt;
      {% csrf_token %}
      {{ form.q }}
      &lt;button type=&quot;submit&quot;&gt;
           &lt;i style=&quot;padding-top: 0.125rem; font-size: 1.75rem;&quot; class=&quot;material-icons&quot;&gt;search&lt;/i&gt;&lt;/button&gt;
  &lt;/form&gt;
  ---
  &lt;script&gt;
          $(document).on('keyup', '#id_q', function (e) {
              e.preventDefault();
              var results = [];
              $.ajax({
                  type: 'POST',
                  url: '{% url &quot;search&quot; %}',
                  data: {
                      ss: $('#id_q').val(),
                      csrfmiddlewaretoken: '{{ csrf_token }}',
                      action: 'post'
                  },
                  success: function (json) {
                      $.each(JSON.parse(json.search_string), function (i, item) {
  
                          results.push(
                              `&lt;div onclick=&quot;window.location.href='${item.fields.slug}'&quot; class=&quot;anime&quot;&gt; \
                                  &lt;div class=&quot;background-search&quot;&gt; \
                                      &lt;img src=&quot;${item.fields.image.url}&quot; alt=&quot;&quot;&gt; \
                                      &lt;div class=&quot;cover&quot;&gt;&lt;/div&gt; \
                                      &lt;div class=&quot;anime-data&quot;&gt; \
                                          &lt;img src=&quot;${item.fields.icon}&quot; alt=&quot;&quot;&gt; \
                                          &lt;div class=&quot;anime-info&quot;&gt; \
                                              &lt;div class=&quot;data&quot;&gt; \
                                                  &lt;h3&gt;${item.fields.title_english}&lt;/h3&gt; \
                                                  &lt;div class=&quot;p&quot;&gt;${item.fields.description}&lt;/div&gt; \
                                              &lt;/div&gt; \
                                              &lt;div class=&quot;about&quot;&gt; \
                                                  &lt;span&gt;Started:${item.fields.time_and_date_started}&lt;/span&gt; \
                                                  &lt;span&gt;Rating:${item.fields.rating}&lt;/span&gt; \
                                              &lt;/div&gt; \
                                          &lt;/div&gt; \
                                      &lt;/div&gt; \
                                  &lt;/div&gt; \
                              &lt;/div&gt;`);
  
                      })
  
                      document.getElementById(&quot;anime-list-id&quot;).innerHTML = results;
                  },
                  error: function (xhr, errmsg, err) {}
              });
          })
      &lt;/script&gt;
  </code></pre>
  <p>I tried multiple ideas but none worked</p>
  <ul>
  <li><code>${item.fields.image.url}</code></li>
  <li><code>${item.fields.image}</code></li>
  <li><code>${item.fields.image.src}</code></li>
  </ul>
  <p>The other fields are working but not the icon / image</p>
  <p><strong>views.py</strong></p>
  <pre class="lang-py prettyprint-override"><code>def search(request):
      form = SearchForm()
      
      if request.POST.get('action') == 'post':
          search_string = str(request.POST.get('ss'))
  
          if search_string is not None:
              search_string = Anime.objects.filter(title_english__icontains=search_string)[:7]
  
          data = serializers.serialize('json', list(search_string), fields=('id', 'title_english', 'description', 'image', 'icon', 'rating', 'time_and_date_started', 'slug'))
  
          return JsonResponse({'search_string':data})
  
      return render(request, 'search/search.html', {'form': form})
  </code></pre>
  <p>This is the result:</p>
  <p><a href="https://i.stack.imgur.com/vkBbD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vkBbD.png" alt="enter image description here" /></a></p>
  <p>And this is how it should look like:
  <a href="https://i.stack.imgur.com/ozJvb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ozJvb.png" alt="enter image description here" /></a></p>
  <p>Any ideas you think may be causing the problem?</p>