title: Problem with passing images from Django REST Framework to React
body: <p>I'm trying to display an image for a product category in React.</p>
  <p>Added the following lines to the settings:</p>
  <pre><code>MEDIA_URL = '/media/'
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  </code></pre>
  <p>Then set up URLs to serve media files during development:</p>
  <pre><code>router = routers.SimpleRouter()
  
  # some routes here
  
  urlpatterns = [
      path('', include(router.urls)),
  ]
  
  if settings.DEBUG:
      urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>
  <p>The category model looks like this:</p>
  <pre><code>class Category(models.Model):
      title = models.CharField(max_length=100, null=False)
      slug = models.SlugField(max_length=100, unique=True)
      poster = models.ImageField(upload_to=&quot;categories/&quot;)
  </code></pre>
  <p>Serializer for it:</p>
  <pre><code>class CategorySerializer(ModelSerializer):
      class Meta:
          model = Category
          fields = '__all__'
  </code></pre>
  <p>On the home page in React I display a list of CategoryCards:</p>
  <pre><code>import React, {useEffect} from &quot;react&quot;;
  import * as API from &quot;../apis/API&quot;;
  import CategoryCard from &quot;./CategoryCard&quot;;
  import Loader from &quot;./Loader/Loader&quot;;
  
  export default function Home() {
      const [categories, setCategories] = React.useState([]);
      const [loading, setLoading] = React.useState(true);
  
      useEffect(() =&gt; {
          API.list('categories')
              .then(p =&gt; setCategories(p))
              .then(_ =&gt; setLoading(false));
      }, []);
  
      return (
          &lt;div&gt;
              &lt;label&gt;Popular categories&lt;/label&gt;
              {loading &amp;&amp; &lt;Loader/&gt;}
              {categories.length ? (
                  &lt;div&gt;
                      {categories.map(c =&gt; &lt;CategoryCard key={c.id} product={c}/&gt;)}
                  &lt;/div&gt;
              ) : (
                  loading ? null : &lt;p&gt;No categories&lt;/p&gt;
              )}
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>And React component to display category title and image:</p>
  <pre><code>import React from 'react';
  import {A} from 'hookrouter';
  
  export default function CategoryCard({product}) {
      return (
          &lt;div&gt;
              &lt;A href={`/catalog/${product.slug}/list`}&gt;
                  {product.title}
              &lt;/A&gt;
              &lt;img src={product.poster} alt={`${product.title} poster`}/&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p>However, I am not getting images on the page.</p>
  <p>I added one category via Django admin panel, the file was successfully placed in the right folder (/media/categories/...).</p>
  <p>product.poster looks like this: http://localhost:8000/media/categories/processor-logo.png.</p>
  <p>When I try to navigate to this address through the browser's address bar or through the admin panel, I get a 404 error. What's the problem?</p>