在React + Django应用程序中加载图像 [英] Loading Image in a React+Django app
问题描述
因此，我有一个用python / django编写的小项目用于后端，并对前端进行响应。我遵循的教程来自： http://geezhawk.github.io/using -react-with-django-rest-framework
So I have a little project written in python/django for the backend and react for the frontend. I followed the tutorial from: http://geezhawk.github.io/using-react-with-django-rest-framework
我想显示项目徽标的图像，但webpack构建成功，但是，当我看到该页面时无法加载该图像，我想这是因为无法从Django的URL解析图像的编译URL，而且访问该URL的URL只是加载了相同的索引页面...。
I want to show an image for the logo of the project, the webpack build was success, but however, the image could not load up when I see the page, I suppose that is because the compiled URL of the image could not be resolved from the django's urls, and also accessing the url for it just load the same index page....
在这一点上，我不确定该如何解决，但是如果有人可以指出如何执行此操作的示例代码，我将不胜感激，如何在react + django项目中加载图像。
At this point I'm not sure how I can fix it, but I would be more than grateful if anyone can point me to an example code of how to do this, how to load image in a react + django project.
编辑
项目结构
Edit
Project structure
project
|- api
| |- models.py
| |- serializers.py
| |- views.py
|- assets
| |- bundles
| |- js
|- node_modules
|- project
| |- settings.py
| |- static
| |- urls.py
|- templates
| |- index.html
在urls.py内
url(r'^$', TemplateView.as_view(template_name='index.html'))
这是我的index.html
and here is my index.html
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
{% render_bundle 'main' %}
</body>
</html>
这是我要在JS中加载图像的地方
and here is where I'm trying to load an image in my JS
import React from 'react'
import logo from './resources/logo.jpeg'
class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-expand-md fixed top bg-dark navbar-dark">
<a className="navbar-brand" href="#">
<img src={logo} width="30" height="30" className="d-inline-block align-top" alt="" />
Project Name
</a>
</nav>
)
}
}
推荐答案
我遇到了与我当时遇到的相同问题构建一个React前端，Django后端单页面应用程序。问题是webpack控制着JS代码中的导入，并希望管理静态文件的位置，但是django是托管网站的站点，因此是托管静态文件的站点。
I ran into the same problem that you are running into when I was building a react front-end, django backend single-page-app. The issue is that webpack controls imports in the JS code and wants to manage the location of static files, but django is the one hosting the website and, thus, the static files.
我们解决此问题的方法是不将图像导入javascript，而是将url路径指向指向该图像由django托管的位置的图像。
The way that we worked around this is by not importing the images in the javascript but, instead, putting the url path to the image that points to the location where it is being hosted by django.
看完链接的教程后，我相信您应该在Django应用程序中添加以下内容：
After looking at the tutorial you linked to, I believe you should make the following additions to your django app:
- 将
STATIC_URL ='/ static /'添加到您的设置中。py -
要么将logo.jpeg，然后放置图片，放在您的
assets /文件夹中，或将resources /文件夹添加到settings.py中的STATICFILES_DIR变量中，例如（假设资源在您的项目的顶层目录中）
- Add
STATIC_URL = '/static/'to your settings.py Either put the logo.jpeg, and subsequent images, in your
assets/folder or add theresources/folder to the STATICFILES_DIR variable in settings.py as such (assuming resources is in the top level direcrory of your project):
STATICFILES_DIRS = (
#This lets Django's collectstatic store our bundles
os.path.join(BASE_DIR, 'assets'),
os.path.join(BASE_DIR, 'resources'),
)
现在，您应该可以访问该映像了（如果您执行 django admin.py运行服务器），请转到127.0.0.1:8000/static/logo.jpeg。在HTML / JS中，图像的URL只是 / static / logo.jpeg ，因为在浏览器中它将解析为整个URL。
Now, you should be able to access the image (if you do django admin.py runserver) by going to 127.0.0.1:8000/static/logo.jpeg. Within the HTML/JS, the URL to the image is simply "/static/logo.jpeg" since within the browser it will resolve that to the entire URL.
因此，现在，如果您有一个图像放在资产或资源文件夹中，且其路径在 path / to / image.jpeg文件夹中 ，然后在您的反应代码中作为图像的src放置的URL是 / static / path / to / image.jpeg （开头的/对于确保使用绝对网址非常重要）。因此，您可以将Header类更改为：
Thus, now if you have an image that you put in your assets or resources folder with a path within the folder of "path/to/image.jpeg", then the URL to put as the src of the image in your react code is "/static/path/to/image.jpeg" (the / in the beginning is very important to ensure it does the absolute URL). Thus, you can change your Header class to be:
import React from 'react'
class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-expand-md fixed top bg-dark navbar-dark">
<a className="navbar-brand" href="#">
<img src={"/static/logo.jpeg"} width="30" height="30" className="d-inline-block align-top" alt="" />
Project Name
</a>
</nav>
)
}
}
只要您通过Django托管静态文件，此方法就可以正常工作。
This should work as long as your host your static files through Django.
这篇关于在React + Django应用程序中加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
