如何在HTML中设置img标签绝对路径（Django+React项目场景）

核心问题：你当前直接使用本地磁盘绝对路径的写法不可行，浏览器出于安全策略禁止直接读取用户本地文件系统的资源，且该路径仅对你的本地开发设备有效，项目部署后完全无法使用。

第一步：配置Django端媒体资源访问 #

• 首先在Django项目的settings.py中添加媒体资源配置：

# 媒体文件存储根目录，对应你当前存图片的本地目录
MEDIA_ROOT = 'C:/Users/25191/Desktop/python_projects/doctorsolve/Drsove/media/'
# 媒体文件的访问路由前缀
MEDIA_URL = '/media/'

• 然后在项目根urls.py中添加媒体资源路由映射，开发环境下可直接通过Django访问媒体文件：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的原有其他路由保持不变
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 若前后端端口不一致出现跨域问题，可安装django-cors-headers配置跨域白名单，允许React的访问域名调用Django接口。
• 可选优化：调整你返回图片名称的端点，直接返回完整的可访问图片路径，格式为http://<Django服务地址>:<端口>/media/media/images/HealthCondition/<图片文件名>，避免前端拼接出错。

第二步：调整React端代码 #

如果Django本地开发服务地址为http://127.0.0.1:8000，修正后的组件代码如下：

function Condition(props) {
    // 拼接Django服务的媒体资源访问地址，禁止使用本地磁盘路径
    const src = `http://127.0.0.1:8000/media/media/images/HealthCondition/${props.meddata.image}`
    return (
        <>
            <div className="item">
                <a href="#">
                    <img src={src} alt="medicine item image" />
                    <div className="desc">
                        <p className="medicinename">{props.meddata.title}</p>
                    </div>
                </a>
            </div>
        </>
    );
}

注意：生产环境部署时，不要用Django提供媒体资源服务，需要用Nginx等反向代理服务处理静态/媒体资源请求，对应修改React中拼接的域名前缀即可。

内容的提问来源于stack exchange，提问作者leburik89