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]
相关推荐
沐墨染14 小时前
Vue实战:自动化研判报告组件的设计与实现
前端·javascript·信息可视化·数据分析·自动化·vue
奔跑的呱呱牛14 小时前
viewer-utils 图片预览工具库
javascript·vue·react
wxin_VXbishe16 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·spring boot·python·spring·django·php
云和数据.ChenGuang18 小时前
python 面向对象基础入门
开发语言·前端·python·django·flask
Cult Of18 小时前
Alicea Wind的个人网站开发日志(1)
python·vue
Polaris_YJH18 小时前
使用Vue3+Vite+Pinia+elementUI搭建初级企业级项目
前端·javascript·elementui·vue
Mr Xu_1 天前
【Vue3 + ECharts 实战】正确使用 showLoading、resize 与 dispose 避免内存泄漏
前端·信息可视化·vue·echarts
换日线°1 天前
前端炫酷展开效果
前端·javascript·vue
墨染青竹梦悠然2 天前
基于Django+React的个人财务管理系统
python·django·毕业设计
IT北辰2 天前
基于Vue3+python+mysql8.0的财务凭证录入系统,前后端分离完整版(可赠送源码)
python·vue