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]
相关推荐
Da Zeng20 小时前
VUE3 script 标准写法顺序
vue
Mr-Wanter20 小时前
vue 解决img图片路径存在但图片无法访问时显示错误的问题
前端·vue·img
球球不吃虾20 小时前
分享一个简单的交互式塔罗牌抽牌应用
前端·vue
飞Link20 小时前
后端架构选型:Django、Flask 与 Spring Boot 的三剑客之争
spring boot·python·django·flask
【赫兹威客】浩哥21 小时前
【赫兹威客】框架模板-后端命令行部署教程
python·django
【赫兹威客】浩哥2 天前
【赫兹威客】框架模板-后端bat脚本部署教程
python·django
biyezuopinvip2 天前
基于Spring Boot的社区互助平台设计与实现(毕业论文)
java·spring boot·vue·毕业设计·论文·毕业论文·社区互助平台设计与实现
joan_852 天前
input禁止自动填充
前端·elementui·vue
充气大锤2 天前
前端实现流式输出配合katex.js
开发语言·前端·javascript·ai·vue
2501_944526422 天前
Flutter for OpenHarmony 万能游戏库App实战 - 主题切换实现
android·开发语言·javascript·python·flutter·游戏·django