Как отобразить изображения и аудио в React из Django Rest API?

Как мне получить изображение и аудиофайл из api в моем приложении react. Он только отображает их местоположение, где они сохранены. также пробовал использовать

<img src="{{songs.image}}" alt="error"/> 

не могу заставить его работать

urls.py

router = routers.DefaultRouter()                   
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api-auth/', include('rest_framework.urls')),
    path('api/', include(router.urls)) ,
    path('',TesView.as_view(), name='test ')    
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

models.py

class Student(models.Model):
    songName = models.CharField(max_length=1000)
    image = models.ImageField( upload_to="chapters")
    data_enrolled = models.DateTimeField(auto_now=True)
    audio = models.FileField(upload_to='musics' )

    def __str__(self):
        return self.songName

папкаreact app.js

function App() {
  const [song, setSong] = useState([])
  useEffect(() => {
    async function getAllSong(){
      try {
        const song = await axios.get("http://127.0.0.1:8000/")
        console.log(song.data)
        setSong(song.data)
      } catch(error){
        console.log(error)} }

    getAllSong()
  }, [])
  return (
    <div className="App">
     <h1>Connect js to django</h1>
     {
       song.map((songs, i)=>{
         return (
           <div key={i}>
              <h2>{songs.songName} </h2>  
              <img src="{{songs.image.url}}" alt="error"/> 
              <h2 > {songs.audio}</h2>  
          </div> )}}
    </div>);}

export default App;

output

Вернуться на верх