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]
相关推荐
志尊宝2 小时前
Vue3 零基础每日笔记(035):什么是 Composables——mixin 之死与逻辑复用新方案
笔记·vue·html·前端开发·软件开发
志尊宝3 小时前
Vue3 零基础每日笔记(030):动态组件与 keep-alive——切换组件与页面缓存
笔记·vue·html·前端开发·软件开发
高级程序源4 小时前
django校企合作实习基地管理系统82506-计算机课程设计、毕业设计
vue.js·后端·python·mysql·django·课程设计·pygame
志尊宝4 小时前
Vue3 零基础每日笔记(029):插槽 slot 三连——默认、具名、作用域一次讲透
前端·javascript·vue.js·vue·前端开发
尾善爱看海14 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
weixin_BYSJ198715 小时前
【计算机毕设】基于SpringBoot与Vue的文物保护档案管理系统08621
vue.js·spring boot·spring cloud·微服务·架构·django·课程设计
caoerzhong20 小时前
JeeWMS 开源仓库管理系统 GPL-3.0 合规指南:Java WMS 二次开发前必须弄清的授权边界
java·开发语言·开源·vue
小蒜学长1 天前
基于Python的微博热搜话题可视化分析系统的设计与实现(代码+数据库+LW)
后端·python·django·数据可视化·情感分析·微博热搜
李博士每天要洗澡1 天前
AI Agent 怎样参与视频剪辑?从任务描述、MCP 到可编辑时间线
大数据·人工智能·ai·django·pygame
毕业设计7032 天前
(免费领源码)基于Python的博物馆研学活动管理系统的设计与实现22724- java、PHP、python、C#、小程序、大数据、单片机、网络工程等)
python·mysql·随机森林·pycharm·django·flask·推荐算法