从 Django 数据库显示图像到 React JS 前端

Question

I'm having an issue where the images I upload to Django database aren't displaying into the React JS frontend. I created this model:

class Project(models.Model):
    title = models.CharField(max_length=100, null=False)
    description = models.CharField(max_length=10000, null=False)
    thumbnail = models.ImageField(upload_to='images/', null=False)

I'e serialized it and all that. I then upload that information to the database by going to the /admin url where I can see the database. After that, I make an api call to the database and fetch all the data. Now this is where the issue occurs. I move that data into a useState([]) and then map that state. The title and description do get displayed on the screen, but the image doesn't. Here is the code where I map the useState([]):

{projData.map(data => (
     <div key={data.id}>
          <img className="thumbnail" src={data.thumbnail}/>
          <span className="title">{data.title}</span>
          <p className="description">{data.description}</p>
     </div>
))}

So like I said, the title and description do successfully get called, but this is the error I get for the image:

[Error] Failed to load resource: http://127.0.0.1:8000/images/background.png the server responded with a status of 404 (Not Found) (background.png, line 0)

The image does get moved into the images folder. But for some reason, it doesn't display into the actual website. What can I do?

Answer 1

I think that you are passing the image, not its location.
Probably you need to, make it src={data.thumbnail.url}

Answer 2

you must config your media root, add this to your settings file

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,"assets")
]
STATIC_ROOT=os.path.join(BASE_DIR,"static_cdn","static_root")
MEDIA_URL='/media/'
MEDIA_ROOT=os.path.join(BASE_DIR,"static_cdn","media_root")

assets folder is where you store your files locally,you can skip it cause its not related to your problem. static root gonna be files like css and java script,and media root are files like images then add below to your url file

if settings.DEBUG:
    urlpatterns = urlpatterns + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns = urlpatterns + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

and dont forget to upload the image again to be stored in media root. now u have access to your media files in frontend, see this for more info https://docs.djangoproject.com/en/3.2/howto/static-files/