在 Angular 8 中从 Django 服务器渲染图像答案

【问题标题】：rendering Image from the Django server in Angular 8在 Angular 8 中从 Django 服务器渲染图像
【发布时间】：2020-05-09 00:06:23
【问题描述】：

以下是我的模型、视图和序列化程序文件。 API 端点工作正常，在 Angular 中，我可以从 Restaurant 模型中打印名称和地点。但是，我找不到渲染和显示图像的方法（我存储在照片对象中）。我的 API 在我输入时显示图像：

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}}”指向 url 'media/images/iconfinder_thefreeforty_trolle.png'，但无法显示图像。这是将图像从 django 服务器渲染为 angular 的正确方法吗？

我的 django 文件如下： 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')

【问题讨论】：

如果 restaurant.photo 是一个相对 url，比如 media/images/iconfinder_thefreeforty_trolle.png，那么它就不起作用了。它应该是一个绝对网址，例如http://127.0.0.1:8000/media/images/iconfinder_thefreeforty_trolle.png
我认为 src={{restaurant.photo}} 指向 localhost:4200/media/images/iconfinder_thefreeforty_trolle.png 而不是 >127.0.0.1:8000/media/images/iconfinder_thefreeforty_trolle.png 并且没有这样的文件。所以它会抛出找不到文件。但是如何使其成为绝对网址？
如果是一个相对 url，就像您发布的那样，您只需要将 API 的基本 url 连接到 restaurant.photo 值。例如<img src="{{api.url + restaurant.photo}}" >，要快速对其进行硬编码测试，<img src="http://127.0.0.1:8000/{{restaurant.photo}}" >
它正在使用 ``` 127.0.0.1:8000{{restaurant.photo} ``` 但不能使用这种 api.url 方式，只是为了确定，你会在哪里定义api.url?
我在服务文件中定义了端点，例如 `endpoint: string = '127.0.0.1:8000/restaurants/';'我尝试在 html 中使用该端点但没有用。

标签： python django angular api

【解决方案1】：

如果您使用相对值，例如您正在使用的值，那么您就是在引用您网站中的资源。

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

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

又快又脏，<img src="http://127.0.0.1:8000/{{restaurant.photo}}" >（只是作为一个例子，这不是一个好习惯，使用环境来处理这种参数）。

[来自cmets的回答]

【讨论】：