vued中图片路径与主机路径相关联,例如img:‘http://127.0.0.1:8000/media/data/els.jpg‘

news/2024/7/9 23:54:37 标签: vue, django

1.在Django项目的settings.py文件中,确保已指定正确的MEDIA_URLMEDIA_ROOTMEDIA_URL定义了图片的URL前缀,MEDIA_ROOT定义了本地文件系统中存储图片的路径。

2.在 Django 项目的主 urls.py 文件中,确保包含了适当的 URL 配置,以便将媒体文件服务到 MEDIA_URL 路径下的 URL。

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使用

<img :src="imgurl" alt="Image">

this.imgurl = 'http://localhost:8000/media/res/file/' + this.imgurls[this.currentIndex]


http://www.niftyadmin.cn/n/5070156.html

相关文章

【2023年11月第四版教材】第19章《配置与变更管理》(合集篇)

第19章《配置与变更管理》&#xff08;合集篇&#xff09; 1 章节内容2 配置管理3 变更管理4 项目文档管理 1 章节内容 【本章分值预测】本章内容90%和第三版教材内容一样的&#xff0c;少部分有一些变化&#xff0c;特别是变更涉及的人员及职责&#xff0c;预计选择题考3分&a…

PageRank(上):数据分析 | 数据挖掘 | 十大算法之一

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ 🐴作者:秋无之地 🐴简介:CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作,主要擅长领域有:爬虫、后端、大数据开发、数据分析等。 🐴欢迎小伙伴们点赞👍🏻、收藏⭐️、…

软件设计师学习笔记11-磁盘管理+IO管理软件+文件管理+作业管理

目录 1.磁盘管理 1.1磁盘(了解一下) 1.2读取磁盘数据的时间 1.3 磁盘调度算法 1.3.1常见的磁盘调度 1.3.2 先来先服务(FCFS) 1.3.3 最短寻道时间优先(SSTF) 1.4 例题补充(均来自希赛软考) 1.4.1 单/双缓冲区花销时间的计算 1.4.2 SSTF 1.4.3 磁道物理块花销时间计算…

【1.1】神经网络:关于神经网络的介绍

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 神经网络&#xff08;随缘更新&#xff09; ✨特色…

2023最新ICP备案查询系统源码 附教程 Thinkphp框架

2023最新ICP备案查询系统源码 附教程 thinkphp框架 本系统支持网址备案&#xff0c;小程序备案&#xff0c;APP备案查询&#xff0c;快应用备案查询 优势&#xff1a; 响应速度快&#xff0c;没有延迟&#xff0c;没有缓存&#xff0c;数据与官方同步 源码下载&#xff1a;ht…

IDEA 2023.1.3图文安装教程及下载

IDEA 2023.1 最新变化是在 IDEA 2023.1 中&#xff0c;对新 UI 做出了大量改进。实现了性能增强&#xff0c;从而更快导入 Maven&#xff0c;以及在打开项目时更早提供 IDE 功能。 新版本通过后台提交检查提供了简化的提交流程。 IntelliJ IDEA Ultimate 现在支持 Spring Secur…

互斥锁与信号量机制

一、互斥锁 1.锁&#xff1a;是用于实现互斥的一种方法&#xff0c;本质是一个布尔型的变量&#xff0c;只有truefalse两种是否上锁状态。 2.操作&#xff1a;通过acquire(获得锁)与release(释放锁)方法对锁进行操作&#xff0c;方法的执行必须是原子操作 3.缺点&#xff1a…

Springcloud支付模块

客户端消费者80 order 微服务提供者8001 payment 订单模块可以调动支付模块 步骤&#xff1a; 1、建moudle 2、改写pom 3、写yml 4、主启类 5、业务类