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·路由
韩立学长14 小时前
【开题答辩实录分享】以《计算机类专业招聘信息爬取与查询系统设计与实现》为例进行答辩实录分享
python·scrapy·django
我叫张小白。16 小时前
Vue3 v-model:组件通信的语法糖
开发语言·前端·javascript·vue.js·elementui·前端框架·vue
a31582380616 小时前
Linux部署Python Django工程和Node工程,使用宝塔面板
linux·服务器·python·django·node·strapi·宝塔面板
B站计算机毕业设计之家16 小时前
机器学习:python智能电商推荐平台 大数据 spark(Django后端+Vue3前端+协同过滤 毕业设计/实战 源码)✅
大数据·python·spark·django·推荐算法·电商
红队it17 小时前
【Spark+Hive】基于Spark大数据旅游景点数据分析可视化推荐系统(完整系统源码+数据库+开发笔记+详细部署教程+虚拟机分布式启动教程)✅
大数据·python·算法·数据分析·spark·django·echarts
IT教程资源D17 小时前
[N_130]基于springboot,vue校园社团管理系统
mysql·vue·前后端分离·springboot社团
小晗同学17 小时前
创建第一个Nuxt v4.x 应用
vue·vue3·nuxt·prettier·nuxt 4.x
by__csdn17 小时前
Ajax与Axios终极对比指南全方位对比解析
前端·javascript·ajax·okhttp·typescript·vue·restful
by__csdn17 小时前
Vue3+Axios终极封装指南
前端·javascript·vue.js·http·ajax·typescript·vue