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]
相关推荐
Irene19912 小时前
实用篇:vsCode 中连接 WSL 并快速开始一个 Vue3 新项目
git·vscode·vue·wsl
luoluoal2 小时前
基于python图像信息隐藏技术设计(源码+文档)
python·mysql·django·毕业设计·源码
丸子哥哥2 小时前
vue + uni-app:利用原生uni.chooseImage封装拍照功能的组件
微信小程序·uni-app·vue
天天向上vir3 小时前
防抖与节流
前端·typescript·vue
@AfeiyuO3 小时前
Vue3 饼图定制图
vue·echarts
wa的一声哭了3 小时前
赋范空间 赋范空间的完备性
python·线性代数·算法·机器学习·数学建模·矩阵·django
千寻技术帮16 小时前
10422_基于Springboot的教务管理系统
java·spring boot·后端·vue·教务管理
是梦终空18 小时前
计算机毕业设计260—基于Springboot+Vue3+Ai对话的非遗传承管理系统(源代码+数据库+2万字论文)
spring boot·vue·毕业设计·课程设计·毕业论文·ai对话·非遗传承管理系统
PascalMing1 天前
Pascal.Edge物联网平台:生产企业设备数据采集与管理解决方案
物联网·c#·vue·数据采集
启扶农1 天前
lecen:一个更好的开源可视化系统搭建项目--介绍、搭建、访问与基本配置--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·vue·node·所见即所得·表单设计·页面可视化·页面设计器