vued中图片路径与主机路径相关联,例如img:‘http://127.0.0.1:8000/media/data/els.jpg‘

1.在Django项目的settings.py文件中,确保已指定正确的MEDIA_URLMEDIA_ROOTMEDIA_URL定义了图片的URL前缀,MEDIA_ROOT定义了本地文件系统中存储图片的路径。

2.在 Django 项目的主 urls.py 文件中,确保包含了适当的 URL 配置,以便将媒体文件服务到 MEDIA_URL 路径下的 URL。

python 复制代码
from django.views.static import serve
from django.urls import path, re_path, include
from django.conf import settings

#设置静态路径访问接口
 re_path(r'^media/(?P<path>.*)$', serve, {
     'document_root': settings.MEDIA_ROOT
     }),                                     # 静态资源访问接口

3.vue使用

javascript 复制代码
<img :src="imgurl" alt="Image">

this.imgurl = 'http://localhost:8000/media/res/file/' + this.imgurls[this.currentIndex]
相关推荐
weixin_BYSJ198712 小时前
springboot校园自习室管理小程序---附源码32142
java·javascript·spring boot·python·django·flask·php
勇往直前plus17 小时前
Vue3(篇四)单页面应用到路由管理
javascript·typescript·前端框架·vue
勇往直前plus18 小时前
Vue3(篇三) Element Plus
前端·javascript·typescript·vue
智购科技自动售货机工厂19 小时前
即时零售的风吹到自动售货机行业,会带来什么变化?~YH
大数据·人工智能·django·fastapi·零售·tornado
想你依然心痛20 小时前
预测未来用电趋势,机器学习算法在能耗管理中的落地
随机森林·django·数据清洗·特征工程·电力负荷预测·时序数据·能耗管理
倒流时光三十年2 天前
第一阶段 02 · Mapping 与数据类型(text vs keyword 是重点)
后端·python·django
shawxlee2 天前
vue3+axios挑战最简洁实用的配置封装+接口调用:请求拦截器、响应拦截器、通用请求方法(单个请求/并发请求/下载文件)、统一接口管理
前端·经验分享·vue·接口·axios·api
weixin_BYSJ19873 天前
springboot3家政平台小程序--附源码00904
java·javascript·spring boot·python·django·flask·php
米码收割机4 天前
【Python】Django 电子设备商城系统(源码+说明文档)[独一无二]
开发语言·python·django
RuoyiOffice4 天前
超级个体接私活必看:后端+前端+移动端三端一体企业管理系统怎么选(2026)
java·spring boot·vue·uniapp·全栈·企业管理·接私活