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

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

PHP | Image not loading from File

问题

我正试图将一张图片从本地目录加载到我的PHP文件中，但似乎无法加载。

这是我的代码：

  1.   <nav class="nav-bar">
  2.     <img class="logo" src="images/logoDarkBlue.png" alt="img">
  3.     
  4.     <?php 
  5.       echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>"; 
  6.     ?>
  8.     <form>
  9.       <input type="text" class="nav-search" placeholder="Search">
  10.     </form>
  11.     <div class="dropdown">
  12.       <button onclick="myFunction()" class="log-in">
  13.         <i class="fa-regular fa-user"></i> &nbsp;<i class="fa-solid fa-angle-down"></i>
  14.       </button>
  15.       <div id="myDropdown" class="dropdown-content">
  16.         <a href="#"><i class="fa-solid fa-circle-info"></i> &nbsp;Terms & Policies</a>
  17.         <a href="#"><i class="fa-regular fa-circle-question"></i> &nbsp;Log In / Sign Up</a>
  18.       </div>
  19.     </div>
  20.   </nav>

这是我的完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.   <!-- EXTERNAL CSS -->
  10.   <!-- <link rel="stylesheet" href="index.css"> -->
  11.   <style>
  12.     <?php include "css/index.css" ?>
  13.   </style>
  15.   <!-- EXTERNAL SCRIPTS -->
  16.   <script src="https://kit.fontawesome.com/....." crossorigin="anonymous"></script>
  18.   <title>Title</title>
  19. </head>
  21. <body>
  22.   <nav class="nav-bar">
  23.     <img class="logo" src="images/logoDarkBlue.png" alt="img">
  24.     
  25.     <?php 
  26.       echo "<img class='logo' src='images/logoDarkBlue.png' alt='img'>"; 
  27.     ?>
  29.     <form>
  30.       <input type="text" class="nav-search" placeholder="Search">
  31.     </form>
  32.     <div class="dropdown">
  33.       <button onclick="myFunction()" class="log-in">
  34.         <i class="fa-regular fa-user"></i> &nbsp;<i class="fa-solid fa-angle-down"></i>
  35.       </button>
  36.       <div id="myDropdown" class="dropdown-content">
  37.         <a href="#"><i class="fa-solid fa-circle-info"></i> &nbsp;Terms & Policies</a>
  38.         <a href="#"><i class="fa-regular fa-circle-question"></i> &nbsp;Log In / Sign Up</a>
  39.       </div>
  40.     </div>
  41.   </nav>
  43.   <script>
  44.     function myFunction() {
  45.       document.getElementById("myDropdown").classList.toggle("show");
  46.     }
  48.     window.onclick = function (event) {
  49.       if (!event.target.matches('.log-in')) {
  50.         var dropdowns = document.getElementsByClassName("dropdown-content");
  51.         var i;
  52.         for (i = 0; i < dropdowns.length; i++) {
  53.           var openDropdown = dropdowns[i];
  54.           if (openDropdown.classList.contains('show')) {
  55.             openDropdown.classList.remove('show');
  56.           }
  57.         }
  58.       }
  59.     }
  60.   </script>
  62. </body>
  64. </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配置：

  1. server{
  2.   listen 80;
  3.   server_name localhost;
  4.   root /app/public;
  5.   index index.php;
  7.   location ~ \.php$ {
  8.     fastcgi_pass app:9000;
  9.     fastcgi_index index.php;
  10.     fastcgi_param REQUEST_METHOD $request_method;
  11.     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  12.     include fastcgi_params;
  13.   }
  14. }

docker-compose.yml 文件：

  1. version: "3.9"
  2. services:
  3.   webserver:
  4.     image: nginx:latest
  5.     ports:
  6.       - "80:80"
  7.     volumes:
  8.       - ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
  9.   app:
  10.     build:
  11.       context: .
  12.       dockerfile: ./php/Dockerfile
  13.     volumes:
  14.       - ./app:/app
  15.   postgres:
  16.     image: postgres:latest
  17.     restart: always
  18.     environment:
  19.       POSTGRES_DB: "test"
  20.       POSTGRES_USER: "testUser"
  21.       POSTGRES_PASSWORD: "password"
  22.     ports:
  23.       - "5432:5432"
  24.     expose:
  25.       - "5432"
  26.     volumes:
  27.       - data:/var/lib/postgresql/data
  28.   pg-admin:
  29.     image: dpage/pgadmin4:latest
  30.     environment:
  31.       - PGADMIN_DEFAULT_EMAIL=test@gmail.com
  32.       - PGADMIN_DEFAULT_PASSWORD=admin
  33.       - PGADMIN_LISTEN_PORT=5050
  34.     ports:
  35.       - "5050:5050"
  36. volumes:
  37.   data:

Dockerfile：

  1. FROM php:8.1-fpm-alpine
  3. RUN set -ex \
  4.   && apk --no-cache add \
  5.     postgresql-dev
  7. RUN docker-php-ext-install pdo pdo_pgsql
  8. 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:

  1.   &lt;nav class=&quot;nav-bar&quot;&gt;
  2. &lt;img class=&quot;logo&quot; src=&quot;images/logoDarkBlue.png&quot; alt=&quot;img&quot;&gt;
  3. &lt;?php 
  4. echo &quot;&lt;img class=&#39;logo&#39; src=&#39;images/logoDarkBlue.png&#39; alt=&#39;img&#39;&gt;&quot;; 
  5. ?&gt;
  6. &lt;form&gt;
  7. &lt;input type=&quot;text&quot; class=&quot;nav-search&quot; placeholder=&quot;Search&quot;&gt;
  8. &lt;/form&gt;
  9. &lt;div class=&quot;dropdown&quot;&gt;
  10. &lt;button onclick=&quot;myFunction()&quot; class=&quot;log-in&quot;&gt;
  11. &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;
  12. &lt;/button&gt;
  13. &lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;
  14. &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;
  15. &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;
  16. &lt;/div&gt;
  17. &lt;/div&gt;
  18. &lt;/nav&gt;

Here is my entire code:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;!-- EXTERNAL CSS --&gt;
  8. &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt; --&gt;
  9. &lt;style&gt;
  10. &lt;?php include &quot;css/index.css&quot; ?&gt;
  11. &lt;/style&gt;
  12. &lt;!-- EXTERNAL SCRIPTS --&gt;
  13. &lt;script src=&quot;https://kit.fontawesome.com/.....&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  14. &lt;title&gt;Title&lt;/title&gt;
  15. &lt;/head&gt;
  16. &lt;body&gt;
  17. &lt;nav class=&quot;nav-bar&quot;&gt;
  18. &lt;img class=&quot;logo&quot; src=&quot;images/logoDarkBlue.png&quot; alt=&quot;img&quot;&gt;
  19. &lt;?php 
  20. echo &quot;&lt;img class=&#39;logo&#39; src=&#39;images/logoDarkBlue.png&#39; alt=&#39;img&#39;&gt;&quot;; 
  21. ?&gt;
  22. &lt;form&gt;
  23. &lt;input type=&quot;text&quot; class=&quot;nav-search&quot; placeholder=&quot;Search&quot;&gt;
  24. &lt;/form&gt;
  25. &lt;div class=&quot;dropdown&quot;&gt;
  26. &lt;button onclick=&quot;myFunction()&quot; class=&quot;log-in&quot;&gt;
  27. &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;
  28. &lt;/button&gt;
  29. &lt;div id=&quot;myDropdown&quot; class=&quot;dropdown-content&quot;&gt;
  30. &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;
  31. &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;
  32. &lt;/div&gt;
  33. &lt;/div&gt;
  34. &lt;/nav&gt;
  35. &lt;script&gt;
  36. function myFunction() {
  37. document.getElementById(&quot;myDropdown&quot;).classList.toggle(&quot;show&quot;);
  38. }
  39. window.onclick = function (event) {
  40. if (!event.target.matches(&#39;.log-in&#39;)) {
  41. var dropdowns = document.getElementsByClassName(&quot;dropdown-content&quot;);
  42. var i;
  43. for (i = 0; i &lt; dropdowns.length; i++) {
  44. var openDropdown = dropdowns[i];
  45. if (openDropdown.classList.contains(&#39;show&#39;)) {
  46. openDropdown.classList.remove(&#39;show&#39;);
  47. }
  48. }
  49. }
  50. }
  51. &lt;/script&gt;
  52. &lt;/body&gt;
  53. &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:

  1. server{
  2. listen 80;
  3. server_name localhost;
  4. root /app/public;
  5. index index.php;
  6. location ~ \.php$ {
  7. fastcgi_pass app:9000;
  8. fastcgi_index index.php;
  9. fastcgi_param REQUEST_METHOD $request_method;
  10. fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
  11. include fastcgi_params;
  12. }
  13. }

docker-compose.yml File:

  1. version: &quot;3.9&quot;
  2. services:
  3. webserver:
  4. image: nginx:latest
  5. ports:
  6. - &quot;80:80&quot;
  7. volumes:
  8. - ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
  9. app:
  10. build:
  11. context: .
  12. dockerfile: ./php/Dockerfile
  13. volumes:
  14. - ./app:/app
  15. postgres:
  16. image: postgres:latest
  17. restart: always
  18. environment:
  19. POSTGRES_DB: &quot;test&quot;
  20. POSTGRES_USER: &quot;testUser&quot;
  21. POSTGRES_PASSWORD: &quot;password&quot;
  22. ports:
  23. - &quot;5432:5432&quot;
  24. expose:
  25. - &quot;5432&quot;
  26. volumes:
  27. - data:/var/lib/postgresql/data
  28. pg-admin:
  29. image: dpage/pgadmin4:latest
  30. environment:
  31. - PGADMIN_DEFAULT_EMAIL=test@gmail.com
  32. - PGADMIN_DEFAULT_PASSWORD=admin
  33. - PGADMIN_LISTEN_PORT=5050
  34. ports:
  35. - &quot;5050:5050&quot;
  36. volumes:
  37. data:

Dockerfile:

  1. FROM php:8.1-fpm-alpine
  2. RUN set -ex \
  3. &amp;&amp; apk --no-cache add \
  4. postgresql-dev
  5. RUN docker-php-ext-install pdo pdo_pgsql
  6. RUN docker-php-ext-install pdo pgsql

答案1

得分: 1

你正在将所有的 .php 请求转发到 FPM（您的 app 服务），但尚未包括非PHP文件在您的 NGINX 服务器中。

您唯一缺少的是在 webserver 服务下添加相应的卷挂载。

  1.   webserver:
  2. image: nginx:latest
  3. ports:
  4. - "80:80"
  5. volumes:
  6. - ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
  7. - ./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

  1.   webserver:
  2. image: nginx:latest
  3. ports:
  4. - &quot;80:80&quot;
  5. volumes:
  6. - ./nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
  7. - ./app:/app

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

发表评论

匿名网友

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

确定