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]
相关推荐
wefly20171 天前
开发者效率神器!jsontop.cn一站式工具集,覆盖开发全流程高频需求
前端·后端·python·django·flask·前端开发工具·后端开发工具
阿奇__1 天前
前端下拉数据缓存策略
缓存·vue
yuyuxun11 天前
基于JSP购物网站系统的设计与实现 毕业设计-附源码03645
java·开发语言·python·django·flask·课程设计·pygame
智能工业品检测-奇妙智能1 天前
springboot对接阿里云短信
人工智能·vue·springboot·阿里云短信
vx-程序开发1 天前
springboot具备推荐和预警机制的大学生兼职平台的设计与实现-计算机毕业设计源码17157
java·c++·spring boot·python·spring·django·php
Mr数据杨1 天前
【Dv3Admin】Django通用自定义工作台卡片
数据库·django·sqlite
结网的兔子2 天前
前端学习笔记(实战准备篇)——用vite构建一个项目【吐血整理】
前端·学习·elementui·npm·node.js·vue
AC赳赳老秦2 天前
国产化AI运维新趋势:DeepSeek赋能国产算力部署的高效故障排查
大数据·人工智能·python·django·去中心化·ai-native·deepseek
wefly20172 天前
告别繁琐配置!m3u8live.cn让 M3U8 链接验证变得如此简单
开发语言·前端·python·django·flask·开发工具
Irene19912 天前
Vue3 第三方样式表 在main.ts和App.vue中导入的区别
vue·导入·样式表