PHP/HTML：如何根据数据库中的值更改图像源

Question

I have HTML in my PHP file, because I'm using data from a database to display on my website.我的 PHP 文件中有 HTML，因为我使用数据库中的数据显示在我的网站上。 (This is my first time using PHP so my knowledge is really little) （这是我第一次使用 PHP 所以我的知识真的很少）

My question is how I could change my image source depending on the value from the database.我的问题是如何根据数据库中的值更改图像源。

The depending value I'm talking about is called = SENT_NUMBER_1我正在谈论的依赖值称为= SENT_NUMBER_1

<?php
//This line will make the page auto-refresh each 15 seconds
$page = $_SERVER['PHP_SELF'];
$sec = "15";?>


<html>
<head>
<style>

     div.image{
        transform: rotate(90deg);
        width:100px;
        height:200px;
        background: transparent;
        position: absolute;
        top:30%;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        content:url(photo) // This is the url I'm wanting to change into either: Empty.png / 25.png / 50.png / 75.png /100.png || like = content:url(/50.png) 
        }


</style>

<div class="image"></div>

i also have something like this but I don't know if this works, and where to put it.我也有类似的东西，但我不知道这是否有效，以及放在哪里。

if(SENT_NUMBER_1 <= 10){
    photo = "10.png"
}
elseif(SENT_NUMBER_1 >= 11 && <=25){
    photo = "25.png"
}
elseif(SENT_NUMBER_1 >= 26 && <=49){
    photo = "50.png"
}
elseif(SENT_NUMBER_1 >= 50 && <=74){
    photo = "75.png"
}
elseif(SENT_NUMBER_1 >= 75 && <=100){
    photo = "100.png"
}

Here is a screenshot from the [website] , the image I'm wanting to change is the battery you see on the screenshot.这是[网站]的屏幕截图，我要更改的图像是您在屏幕截图中看到的电池。

Whole code for if I missed something如果我错过了什么的完整代码

<?php
//This line will make the page auto-refresh each 15 seconds
$page = $_SERVER['PHP_SELF'];
$sec = "15";
?>


<html>
<head>
    <link rel="shortcut icon" href="/favicon-16x16.ico" type="image/x-icon">
    <title>Rattengifmelder</title>

    <style>
    @font-face {
        font-family: Asket Extended; src: url('AsketExtended-Light.otf');
        font-family: Asket Extended; font-weight: bold; src: url('AsketExtended-Light.otf');
    }

    body{
        height: 200vh;
    }

    tbody{
      text-align: center;
    }

    td{
      background-color: transparent;
      width: 70px;
      height: 70px;
    }
    table, th, td{
    font-size: 30px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border: 10px solid white;
    font-family: 'Asket Extended', sans-serif;
    }


    div.image{
        transform: rotate(90deg);
        width:100px;
    height:200px;
    background: transparent;
        position: absolute;
        top:30%;
        bottom: 0;
        left: 0;
        right: 0;
      margin: auto;
        content:url(/100.png)
    }
    div.image2{
        width:100px;
    height:200px;
    background: transparent;
        content:url(/Empty.png)
    }
    div.image3{
        width:100px;
    height:200px;
    background: transparent;
        content:url(/Empty.png)
    }

.center{
    position: sticky;
    top: 0px;
    text-align: center;
    font-family: 'Asket Extended', sans-serif;
    font-size: 50px;
    font-weight: bold;
    padding-top: 50px;
    background-color: white;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
    height: 10%;
  width: 100%;
  background-color: white;
  color: white;
  text-align: center;
    border-top: 1px solid lightgrey ;
}


div.container {
  float: left;
  margin: 100px;
    padding: 20px;
    width: 100px;
}

.menu{
    position: absolute;
    left: 70px;
    top: 65px;
    width:20px;
    height:20px;
    content:url(/menu.png)

}

.battery{
    position: absolute;
    left: 93%;
    top: 50px;
    width: 30px;
    height:60px;
    transform: rotate(90deg);
    content:url(/100.png)

}


.one{

}


.two{

}


.three{

}
    </style>


<!--//I've used bootstrap for the tables, so I inport the CSS files for taht as well...-->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>





<body>
<?php
include("database_connect.php"); //We include the database_connect.php which has the data for the connection to the database


// Check the connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//Again, we grab the table out of the database, name is ESPtable2 in this case
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select

//Now we create the table with all the values from the database



//loop through the table and print the data into the table
while($row = mysqli_fetch_array($result)) {


    $column1 = "RECEIVED_BOOL1";
    $column2 = "RECEIVED_BOOL2";
    $column3 = "RECEIVED_BOOL3";
    $column4 = "RECEIVED_BOOL4";
    $column5 = "RECEIVED_BOOL5";


}
?>



<div class="center">
    <div class="menu"></div>
    <div class="battery"></div>
    <p>Rattengifmelder</p>
</div>


<?php
include("database_connect.php");

if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select

echo "<table>
    <thead>
        <tr>
        <th></th>
        </tr>
    </thead>

    <tbody>
      <tr class='active'>
        <td style='color: grey;'>Grasveld achter</td>
      </tr>
        ";



while($row = mysqli_fetch_array($result)) {

    $cur_sent_bool_1 = $row['SENT_BOOL_1'];
    $cur_sent_bool_2 = $row['SENT_BOOL_2'];
    $cur_sent_bool_3 = $row['SENT_BOOL_3'];


    if($cur_sent_bool_1 == 1){
    $label_sent_bool_1 = "label-success";
    $text_sent_bool_1 = "Actief";
    }
    else{
    $label_sent_bool_1 = "label-danger";
    $text_sent_bool_1 = "Inactief";
    }



      /*echo "<tr class='info'>";
      $unit_id = $row['id'];
        echo "<td>" . $row['id'] . "</td>"; */
        echo "<td>
        <span class='label $label_sent_bool_1'>"
            . $text_sent_bool_1 . "</td>
        </span>";




}
echo "</table>";
?>










<?php

include("database_connect.php");

if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select

echo "<table>
    <thead>
        <tr>
        <th></th>
        </tr>
    </thead>

    <tbody>
      <tr class='active'>
      </tr>
        ";


while($row = mysqli_fetch_array($result)) {

    echo "<tr class='info'>";

    echo "<td style='background-color: transparent;'>" . $row['SENT_NUMBER_1'] . "% </td>";



    echo "</tr></tbody>";



}

echo "</table>
<br>
";
?>

<div class="footer">
    <p></p>
</div>

<div class="image"></div> // this is where the image is displayed

Answer 1

I didn't get where you are getting value of SENT_NUMBER_1 in your php code??我没有得到您在 php 代码中获得 SENT_NUMBER_1 值的位置？

then然后

SENT_NUMBER_1 should be $SENT_NUMBER_1 SENT_NUMBER_1 应该是 $SENT_NUMBER_1

photo should be $photo照片应该是 $photo

if($SENT_NUMBER_1 <= 10){
    $photo = "10.png";
 }
if($SENT_NUMBER_1 >= 11 && $SENT_NUMBER_1 <=25){
     $photo = "25.png";
 }
if($SENT_NUMBER_1 >= 26 && $SENT_NUMBER_1 <=49){
     $photo = "50.png";
 }
if($SENT_NUMBER_1 >= 50 && $SENT_NUMBER_1 <=74){
    $photo = "75.png";
 }
if($SENT_NUMBER_1 >= 75 && $SENT_NUMBER_1 <=100){
    $photo = "100.png";
 }

and then接着

   <div class="image"><img src="<?php echo $photo;?>"></div> // this is where the image is displayed

also declare full path of image.还声明图像的完整路径。

eg例如

   $photo = 'imagefolder/100.png';

PHP/HTML：如何根据数据库中的值更改图像源

问题描述

1 个解决方案

解决方案1
0 2021-04-12 21:35:33

PHP/HTML：如何根据数据库中的值更改图像源

问题描述

1 个解决方案

解决方案1 0 2021-04-12 21:35:33

解决方案1
0 2021-04-12 21:35:33