在Angular 8中从Django服务器渲染图像 [英] rendering Image from the Django server in Angular 8

问题描述

以下是我的模型，视图和序列化器文件.API端点运行正常，在Angular中，我可以从Restaurant模型中打印名称和位置.但是，我找不到渲染和显示图像(已存储在照片对象中)的方法.当我键入以下内容时，我的API会显示图像:

Following are my models, views and serializers file. API endpoints are working fine and in Angular I am able to print name and place from the Restaurant model. However, I couldn't find the way to render and show the image ( which I have stored in photo object). My API shows the image when I type:

http://127.0.0.1:8000/media/images/iconfinder_thefreeforty_trolle.png

但是，如果我使用

<div class='container' >
  <div  *ngFor= "let restaurant of restaurants | async; let i=index">
        <h2> {{restaurant.name}} in {{restaurant.place}}  </h2>
        <small>{{restaurant.photo}}</small>
        <img src={{restaurant.photo}} >
        </div>
  </div>

我看不到任何图像，"{{restaurant.photo}}"指向网址"media/images/iconfinder_thefreeforty_trolle.png"，但无法显示该图像.这是从django服务器渲染图像到角度图像的正确方法吗?

I see no image, the "{{restaurant.photo}}" points to the url 'media/images/iconfinder_thefreeforty_trolle.png', but not able to show the image. Is this the right way to render an image from django server to angular?

我的django文件如下: Models.py

My django files are following: Models.py

from django.db import models


class Restaurant(models.Model):
    name=models.CharField(max_length=40,blank=False)
    place=models.CharField(max_length=20,blank=False)
    photo=models.ImageField(upload_to='images', blank=True)

views.py

@api_view(['GET', 'POST'])
def restaurant_list(request):
    """
    List all code snippets, or create a new snippet.
    """
    if request.method == 'GET':
        restaurants = Restaurant.objects.all()
        serializer = RestaurantSerializer(restaurants, many=True)
        return JsonResponse(serializer.data, safe=False)

    elif request.method == 'POST':
        serializer = RestaurantSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@api_view(['GET', 'PUT', 'DELETE'])
def restaurant_detail(request, pk):
    """
    Retrieve, update or delete a code snippet.
    """
    try:
        restaurant = Restaurant.objects.get(pk=pk)
    except Restaurant.DoesNotExist:
        return Response(status=status.HTTP_404_NOT_FOUND)

    if request.method == 'GET':
        serializer = RestaurantSerializer(restaurant)
        return Response(serializer.data)

    elif request.method == 'PUT':
        restaurant = RestaurantSerializer(restaurant, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

    elif request.method == 'DELETE':
        snippet.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

serializers.py

from rest_framework import serializers
from .models import Restaurant

class RestaurantSerializer(serializers.ModelSerializer):
    class Meta:
        model=Restaurant
        fields=('id','name','place','photo')

推荐答案

如果您使用相对值(例如您所使用的相对值)，那么您正在引用网站中的资源.

If you use a relative value, like the one you are using, then you are referencing a resource within your website.

因为您的API是外部资源，所以 img 标记的 src 属性的值必须是绝对URL.

Because your API is an external resource, the value of the src property of the img tag must be an absolute URL.

在您的情况下，该值应为 http://127.0.0.1:8000/media/images/iconfinder_thefreeforty_trolle.png .

In your case the value should be, http://127.0.0.1:8000/media/images/iconfinder_thefreeforty_trolle.png.

又脏又臭，< img src ="http://127.0.0.1:8000/{{restaurant.photo}}"> (仅作为示例，它是这不是一个好习惯，请为此类参数使用环境.

Quick and dirty, <img src="http://127.0.0.1:8000/{{restaurant.photo}}" > (just to use as an example, it is not a good practice, use environments for this kind of parameters).

[评论的答案]

这篇关于在Angular 8中从Django服务器渲染图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！