英文:
PHP | Image not loading from File
问题
我正试图将一张图片从本地目录加载到我的PHP文件中，但似乎无法加载。
这是我的代码：
<nav class="nav-bar">
<img class="logo" src="images/logoDarkBlue.png" alt="img">
<?php
echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>";
?>
<form>
<input type="text" class="nav-search" placeholder="Search">
</form>
<div class="dropdown">
<button onclick="myFunction()" class="log-in">
<i class="fa-regular fa-user"></i> <i class="fa-solid fa-angle-down"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><i class="fa-solid fa-circle-info"></i> Terms & Policies</a>
<a href="#"><i class="fa-regular fa-circle-question"></i> Log In / Sign Up</a>
</div>
</div>
</nav>
这是我的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- EXTERNAL CSS -->
<!-- <link rel="stylesheet" href="index.css"> -->
<style>
<?php include "css/index.css" ?>
</style>
<!-- EXTERNAL SCRIPTS -->
<script src="https://kit.fontawesome.com/....." crossorigin="anonymous"></script>
<title>Title</title>
</head>
<body>
<nav class="nav-bar">
<img class="logo" src="images/logoDarkBlue.png" alt="img">
<?php
echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>";
?>
<form>
<input type="text" class="nav-search" placeholder="Search">
</form>
<div class="dropdown">
<button onclick="myFunction()" class="log-in">
<i class="fa-regular fa-user"></i> <i class="fa-solid fa-angle-down"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><i class="fa-solid fa-circle-info"></i> Terms & Policies</a>
<a href="#"><i class="fa-regular fa-circle-question"></i> Log In / Sign Up</a>
</div>
</div>
</nav>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.log-in')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
我尝试使用传统的HTML语法添加图像。之后，我尝试使用PHP动态插入图像。但都没有成功。我已经在代码中包括了这两种尝试。
路径：
Web服务器根目录：
C:\Users\sat\OneDrive\Documents\GitHub\Project\DiscussIt\app\public
Images文件夹：
C:\Users\sat\OneDrive\Documents\GitHub\Project\DiscussIt\app\public\images
NGINX配置：
server{
listen 80;
server_name localhost;
root /app/public;
index index.php;
location ~ \.php$ {
fastcgi_pass app:9000;
fastcgi_index index.php;
fastcgi_param REQUEST_METHOD $request_method;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
docker-compose.yml 文件：
version: "3.9"
services:
webserver:
image: nginx:latest
ports:
- "80:80"
volumes:
- ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
app:
build:
context: .
dockerfile: ./php/Dockerfile
volumes:
- ./app:/app
postgres:
image: postgres:latest
restart: always
environment:
POSTGRES_DB: "test"
POSTGRES_USER: "testUser"
POSTGRES_PASSWORD: "password"
ports:
- "5432:5432"
expose:
- "5432"
volumes:
- data:/var/lib/postgresql/data
pg-admin:
image: dpage/pgadmin4:latest
environment:
- PGADMIN_DEFAULT_EMAIL=test@gmail.com
- PGADMIN_DEFAULT_PASSWORD=admin
- PGADMIN_LISTEN_PORT=5050
ports:
- "5050:5050"
volumes:
data:
Dockerfile：
FROM php:8.1-fpm-alpine
RUN set -ex \
&& apk --no-cache add \
postgresql-dev
RUN docker-php-ext-install pdo pdo_pgsql
RUN docker-php-ext-install pdo pgsql
英文:
I am attempting to load an Image from the local directory into my PHP file. However, it doesn't seem to load.
Here is my code:
<nav class="nav-bar">
<img class="logo" src="images/logoDarkBlue.png" alt="img">
<?php
echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>";
?>
<form>
<input type="text" class="nav-search" placeholder="Search">
</form>
<div class="dropdown">
<button onclick="myFunction()" class="log-in">
<i class="fa-regular fa-user"></i> &nbsp;<i class="fa-solid fa-angle-down"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><i class="fa-solid fa-circle-info"></i> &nbsp;Terms & Policies</a>
<a href="#"><i class="fa-regular fa-circle-question"></i> &nbsp;Log In / Sign Up</a>
</div>
</div>
</nav>
Here is my entire code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- EXTERNAL CSS -->
<!-- <link rel="stylesheet" href="index.css"> -->
<style>
<?php include "css/index.css" ?>
</style>
<!-- EXTERNAL SCRIPTS -->
<script src="https://kit.fontawesome.com/....." crossorigin="anonymous"></script>
<title>Title</title>
</head>
<body>
<nav class="nav-bar">
<img class="logo" src="images/logoDarkBlue.png" alt="img">
<?php
echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>";
?>
<form>
<input type="text" class="nav-search" placeholder="Search">
</form>
<div class="dropdown">
<button onclick="myFunction()" class="log-in">
<i class="fa-regular fa-user"></i> &nbsp;<i class="fa-solid fa-angle-down"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><i class="fa-solid fa-circle-info"></i> &nbsp;Terms & Policies</a>
<a href="#"><i class="fa-regular fa-circle-question"></i> &nbsp;Log In / Sign Up</a>
</div>
</div>
</nav>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.log-in')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
I have tried to add the image using the traditional HTML syntax. Following this, I have tried to dynamically insert the image using PHP. However neither have worked. I have included both attempts in my code.
Paths:
Webserver Root:
> C:\Users\sat\OneDrive\Documents\GitHub\Project\DiscussIt\app\public
Images Folder:
> C:\Users\sat\OneDrive\Documents\GitHub\Project\DiscussIt\app\public\images
NGINX Config:
server{
listen 80;
server_name localhost;
root /app/public;
index index.php;
location ~ \.php$ {
fastcgi_pass app:9000;
fastcgi_index index.php;
fastcgi_param REQUEST_METHOD $request_method;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
docker-compose.yml File:
version: "3.9"
services:
webserver:
image: nginx:latest
ports:
- "80:80"
volumes:
- ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
app:
build:
context: .
dockerfile: ./php/Dockerfile
volumes:
- ./app:/app
postgres:
image: postgres:latest
restart: always
environment:
POSTGRES_DB: "test"
POSTGRES_USER: "testUser"
POSTGRES_PASSWORD: "password"
ports:
- "5432:5432"
expose:
- "5432"
volumes:
- data:/var/lib/postgresql/data
pg-admin:
image: dpage/pgadmin4:latest
environment:
- PGADMIN_DEFAULT_EMAIL=test@gmail.com
- PGADMIN_DEFAULT_PASSWORD=admin
- PGADMIN_LISTEN_PORT=5050
ports:
- "5050:5050"
volumes:
data:
Dockerfile:
FROM php:8.1-fpm-alpine
RUN set -ex \
&& apk --no-cache add \
postgresql-dev
RUN docker-php-ext-install pdo pdo_pgsql
RUN docker-php-ext-install pdo pgsql
答案1
得分: 1
你正在将所有的 .php 请求转发到 FPM（您的 app 服务），但尚未包括非PHP文件在您的 NGINX 服务器中。
您唯一缺少的是在 webserver 服务下添加相应的卷挂载。
webserver:
image: nginx:latest
ports:
- "80:80"
volumes:
- ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
- ./app:/app
英文:
You're forwarding all .php requests to FPM (your app service) but have not included the non-PHP files in your NGINX server.
Really all you're missing is a matching volume mount under the webserver service
webserver:
image: nginx:latest
ports:
- "80:80"
volumes:
- ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
- ./app:/app
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论