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]
相关推荐
IT教程资源D18 小时前
[N_160]基于springboot,vue校园论坛系统
mysql·vue·前后端分离·springboot校园论坛·校园论坛交流系统
liu_bees19 小时前
微信小程序Canvas生成图片失败:canvas is empty问题解析
微信小程序·小程序·uni-app·vue
码界奇点19 小时前
基于Django的超市管理系统设计与实现
数据库·python·django·sqlite·毕业设计·源代码管理
B站_计算机毕业设计之家20 小时前
AI大模型:Deepseek美食推荐系统 机器学习 协同过滤推荐算法+可视化 Django框架 大数据毕业设计(源码)✅
python·算法·机器学习·数据分析·django·推荐算法·美食
super_lzb20 小时前
VUE 请求代理地址localhost报错[HPM] Error occurred while trying to proxy request
java·spring·vue·springboot·vue报错
yq19820430115621 小时前
构建高可用资源导航平台:基于Django+Scrapy的分布式架构实践
分布式·scrapy·django
phltxy1 天前
Vue3 + Vite:从入门到实战——核心指令全解析
vue.js·vue
森爱。1 天前
web开发全家桶(django+前端+数据库)
前端·python·django
经年未远1 天前
vue3中实现耳机和扬声器切换方案
javascript·学习·vue
luoluoal2 天前
基于opencv的疲劳检测系统(源码+文档)
python·mysql·django·毕业设计·源码