PHP | 从文件加载图像未显示

huangapple go评论66阅读模式
英文:

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> &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>

这是我的完整代码:

<!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>

我尝试使用传统的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:

  &lt;nav class=&quot;nav-bar&quot;&gt;
&lt;img class=&quot;logo&quot; src=&quot;images/logoDarkBlue.png&quot; alt=&quot;img&quot;&gt;
&lt;?php 
echo &quot;&lt;img class=&#39;logo&#39; src=&#39;images/logoDarkBlue.png&#39; alt=&#39;img&#39;&gt;&quot;; 
?&gt;
&lt;form&gt;
&lt;input type=&quot;text&quot; class=&quot;nav-search&quot; placeholder=&quot;Search&quot;&gt;
&lt;/form&gt;
&lt;div class=&quot;dropdown&quot;&gt;
&lt;button onclick=&quot;myFunction()&quot; class=&quot;log-in&quot;&gt;
&lt;i class=&quot;fa-regular fa-user&quot;&gt;&lt;/i&gt; &amp;nbsp;&lt;i class=&quot;fa-solid fa-angle-down&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;
&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa-solid fa-circle-info&quot;&gt;&lt;/i&gt; &amp;nbsp;Terms &amp; Policies&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa-regular fa-circle-question&quot;&gt;&lt;/i&gt; &amp;nbsp;Log In / Sign Up&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;

Here is my entire code:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;!-- EXTERNAL CSS --&gt;
&lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt; --&gt;
&lt;style&gt;
&lt;?php include &quot;css/index.css&quot; ?&gt;
&lt;/style&gt;
&lt;!-- EXTERNAL SCRIPTS --&gt;
&lt;script src=&quot;https://kit.fontawesome.com/.....&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav class=&quot;nav-bar&quot;&gt;
&lt;img class=&quot;logo&quot; src=&quot;images/logoDarkBlue.png&quot; alt=&quot;img&quot;&gt;
&lt;?php 
echo &quot;&lt;img class=&#39;logo&#39; src=&#39;images/logoDarkBlue.png&#39; alt=&#39;img&#39;&gt;&quot;; 
?&gt;
&lt;form&gt;
&lt;input type=&quot;text&quot; class=&quot;nav-search&quot; placeholder=&quot;Search&quot;&gt;
&lt;/form&gt;
&lt;div class=&quot;dropdown&quot;&gt;
&lt;button onclick=&quot;myFunction()&quot; class=&quot;log-in&quot;&gt;
&lt;i class=&quot;fa-regular fa-user&quot;&gt;&lt;/i&gt; &amp;nbsp;&lt;i class=&quot;fa-solid fa-angle-down&quot;&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;
&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa-solid fa-circle-info&quot;&gt;&lt;/i&gt; &amp;nbsp;Terms &amp; Policies&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa-regular fa-circle-question&quot;&gt;&lt;/i&gt; &amp;nbsp;Log In / Sign Up&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;script&gt;
function myFunction() {
document.getElementById(&quot;myDropdown&quot;).classList.toggle(&quot;show&quot;);
}
window.onclick = function (event) {
if (!event.target.matches(&#39;.log-in&#39;)) {
var dropdowns = document.getElementsByClassName(&quot;dropdown-content&quot;);
var i;
for (i = 0; i &lt; dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains(&#39;show&#39;)) {
openDropdown.classList.remove(&#39;show&#39;);
}
}
}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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

PHP | 从文件加载图像未显示

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: &quot;3.9&quot;
services:
webserver:
image: nginx:latest
ports:
- &quot;80:80&quot;
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: &quot;test&quot;
POSTGRES_USER: &quot;testUser&quot;
POSTGRES_PASSWORD: &quot;password&quot;
ports:
- &quot;5432:5432&quot;
expose:
- &quot;5432&quot;
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:
- &quot;5050:5050&quot;
volumes:
data:

Dockerfile:

FROM php:8.1-fpm-alpine
RUN set -ex \
&amp;&amp; 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:
- &quot;80:80&quot;
volumes:
- ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
- ./app:/app

huangapple
  • 本文由 发表于 2023年3月7日 09:01:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/75657186.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定