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 小时前
Django Flask FastAPI 三者对比
开发语言·python·django·flask·fastapi
Betelgeuse7617 小时前
Django 中间件 4 大钩子 & CBV vs FBV 对比实战
python·中间件·django
是梦终空1 天前
计算机源码273—基于SpringBoot+Vue3停车场管理系统带支沙箱支付(源代码+数据库)
数据库·spring boot·vue·mybatis·停车场管理系统·沙箱支付·毕设设计
北冥有羽Victoria2 天前
Django中间件实战:FBV/CBV日志全兼容
数据库·vscode·后端·python·django·sqlite·开源
_Twink1e2 天前
基于Vue的纯前端的库存销售系统
前端·vue.js·vue·web
灵魂学者2 天前
使用 Electron 打包项目构建 .EXE 桌面应用程序(简)
electron·node.js·vue·build·桌面应用程序
Zephyr_02 天前
SQL,MyBatis-Plus,maven,Spring与VUE3
sql·spring·vue·maven·mybatis
:mnong2 天前
附图报价系统设计分析5
electron·pdf·vue·cad·dwg·定额
桃花键神2 天前
【2026精品项目】基于SpringBoot3+Vue3的旧物置换系统(包含源码+项目文档+SQL脚本+部署教程)
数据库·spring boot·sql·vue
源码之家3 天前
计算机毕业设计:Python中药材数据可视化与智能分析平台 Django框架 中药数据分析 医药数据分析数据分析 可视化 爬虫 (建议收藏)✅
python·深度学习·信息可视化·数据分析·django·课程设计