为啥每当我尝试将图像添加到我的 django 项目时都会出错？
Posted
技术标签:
【中文标题】为啥每当我尝试将图像添加到我的 django 项目时都会出错？【英文标题】：why am i having error whenever i tried to add image to my django project?为什么每当我尝试将图像添加到我的 django 项目时都会出错？ 【发布时间】：2021-08-10 22:26:20 【问题描述】：base.html 的想法是不要在几乎所有页面中重复一些我需要的代码...我可以轻松地 % extends ' homepage/base.html' %. 在我需要的每个页面上。
在下面查看我的 base.html！
1. (base.html)
% load static %
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--fonts-->
<link href="https://fonts.googleapis.com/css2?
family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Niconne&family=Satisfy&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="% static 'homepage/css/styles.css' %">
% if title %
<title>Amal Restaurant - title </title>
% else %
<title>Amal Restaurant</title>
% endif %
</head>
<body>
% block content %
% endblock content %
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"></script>
-->
<!--jquery cdn-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<!--local js files-->
<script src="% static 'homepage/js/jquery.js' %"></script>
<script src="% static 'homepage/js/main.js' %"></script>
</body>
</html>
这是我 % extends 'homepage/base.html' % 所在的 index.html。 除了我的图片之外，其他一切都运行良好。
在下面查看我的 index.html！
2. (index.html)
% extends 'homepage/base.html' %
% block content %
<header class="header">
<div id="logo">
<img src="images/logo-white.png" >
</div>
<div id="nav-bar">
<ul>
<li id="delivery"><a href="#">Food deliveries</a></li>
<li id="works"><a href="#">How it works</a></li>
<li id="cities"><a href="#">Our cities</a></li>
<li id="sign"><a href="#">Sign up</a></li>
</ul>
</div>
<div class="header-text">
<h1 id="header-text-main">
<span id="header-text-primary">Goodbye junk food.</span>
<span id="header-text-secondary">Hello super healthy meals.</span>
</h1>
<div class="header-buttons">
<span id="hungry">I'm hungry</span>
<span id="more">Place Your Order</span>
</div>
</div>
</header>
<section class="main">
<h2 class="headers">Get food fast — not fast food</h2>
<p class="texts">
Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!
</p>
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-repeat"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-time"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-cutlery"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-shopping-cart"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container-fluid">
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="mb-4 h-100">
<img src="% static 'homepage/images/amala.jpeg' %">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="mb-4 h-100">
<img src="% static 'homepage/images/semo.jpeg' %">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="mb-4 h-100">
<img src="% static 'homepage/images/jollof.jpeg' %">
</a>
</div>
</div>
</div>
</section>
% endblock content %
在我的静态目录中，我有另一个目录主页，主页内是我有图像、css 和 js 目录的地方。 像这样： 静态/主页/图片
【问题讨论】：
你“有”什么错误？请将其粘贴到您的帖子中。 我刚刚添加了错误信息的截图，请检查一下..谢谢。 试试***.com/questions/22700097/…% load static % 需要写在index.html too （父模板加载不代表子模板可以直接使用）因为你使用标签那里。直接写在% extends 'homepage/base.html' %下面
感谢@AbdulAzizBarkat，它工作得很好……我差点摔坏我的笔记本电脑……xD
【参考方案1】：
您还必须在index.html 中添加% load static %。
【讨论】：
以上是关于为啥每当我尝试将图像添加到我的 django 项目时都会出错？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 react 中使用 graphene-django 和 axios 将图像上传到我的服务器？