从没有ID的Img获取id

i'm creating a simple bootstrap gallery thumbnail with images that are being called from database. I succeed in calling all the info, but now i'm struggling with getting the id of each image. This is my code:

 <div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
    <p><a href="#" onclick="return getID(this);" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

And this is my function in javascript:

function getID(e)
{
    var x = e.src;
    alert(x);
}

But it is not working, how do I get the id of each image if is being called from a database?

Why don't you get in the same way you wrote?

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
    <p><a href="#" onclick="return getID(<?php echo $row['ID_Category']?>);" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

function getID(id)
{
    alert(id);
}

you can use Attribute tag in a tag and add onclick function to get your id value . i set category-id Attribute and in javascript code use this tag to get value

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
   <p><a href="#" onclick="return getID(this);" category-id="<?php echo $row['ID_Category']?>" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

then this is script function

<script>
function getID(obj)
{
    alert(obj.getAttribute("category-id"));
}
</script>

or add onclick function and send id in this function

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
   <p><a href="#" onclick="return getID('<?php echo $row['ID_Category']?>');"  class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

this is script

<script>
function getID(id)
{
    alert(id);
}
</script>

both will work.

function getID(obj){
   if(obj instanceof HTMLElement) {
    alert(obj.getAttribute("data-target-id"));
   }
   else {
    alert(obj);
   }
}

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
  <div class="caption">
    <h3>Example 1</h3>
    <p>Using data-* attribute</p>
    <p><a href="#" onclick="getID(this);" class="btn btn-primary" role="button" data-target-id="1">Button</a></p>
  </div>
</div>

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
  <div class="caption">
    <h3>Example 2</h3>
    <p>Passing id directly</p>
    <p><a href="#" onclick="getID(1);" class="btn btn-primary" role="button">Button</a></p>
  </div>
</div>

</div>