图像不会显示 Django 3 服务 Angular 8答案

【问题标题】：image will not display Django3 serving Angular8图像不会显示 Django 3 服务 Angular 8
【发布时间】：2020-04-26 22:55:09
【问题描述】：

类似于SO Question，但该解决方案对我不起作用。我无法使用 Angular 前端渲染我的图像。

在浏览器中{{recipe.photo}} 显示http://127.0.0.1:8000/media/images/photo1_mMxzxU0.png。从我认为的另一个 SO 问题来看，因为这是一个指向图像的绝对网址，所以它可以工作..

html

<div *ngIf= "recipes">
    <ul *ngFor ="let recipe of recipes">
        {{recipe.name}}
        {{recipe.photo}}
        <img src={{recipe.photo}} height="150" >
</div>

models.py

class Recipe(models.Model):
    name = models.CharField(max_length=30)
    photo = models.ImageField(upload_to='images/', null=False, blank=False)

views.py

class RestaurantRecipes(generics.ListAPIView):
    serializer_class = RecipeSerializerShort

serializers.py

class RecipeSerializerShort(serializers.ModelSerializer):
    class Meta:
        model = Recipe
        fields = ['name','photo']

settings.py

STATIC_URL = '/static/'
MEDIA_ROOT = '/Users///backend/images/'
MEDIA_URL = '/media/'

我的图片在这个文件夹/Users///backend/images/images/IMAGES_HERE

【问题讨论】：

所以http://127.0.0.1:8000/media/images/photo1_mMxzxU0.png 在浏览器中显示图像？但不是绑定到 src 元素？
如果我将<img src = "http://127.0.0.1:8000/media/images/photo1_mMxzxU0.png"> 放在浏览器中，它不会呈现图像
但是你在浏览器中复制那个 url，这行得通吗？因为如果是这样，那么您在使用 angular 时应该会在控制台中出现一些错误
如果我复制该网址并放入地址栏中，它也不起作用
这是你应该检查的第一件事......http://127.0.0.1:8000/media/photo1_mMxzxU0.png怎么样

标签： django angular django-rest-framework

【解决方案1】：

方括号 [] 告诉 Angular 评估模板表达式

试试这个：

<img [src]="recipe.photo" height="150" >

而不是这个：

<img src={{recipe.photo}} height="150" >

【讨论】：