Estoy haciendo una pagina web de mis fotos en venda. He pensado de mostrarlas en cards
, el problema es que si cojo la imagen con click izquierdo y la arrastro en el navegador, se carga en una pestaña y te la puedes descargar, entonces eso no tiene mucho sentido para mi caso.
Me recomendáis otra tecnología o me ayudáis a encontrar algo que no deje a la persona que esta operando que pueda interaccionar con la imagen.
CÓDIGO:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="row mx-auto p-3">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="card ">
<img src="" class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">
Each merged squad salts the wild porter. Should the charmed
church dodge a camera? The gown litters the rhyme. Another
discrete elevator defects over the target.
</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="card">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">
Each merged squad salts the wild porter. Should the charmed
church dodge a camera? The gown litters the rhyme. Another
discrete elevator defects over the target.
</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="card .img-fluid">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">
Each merged squad salts the wild porter. Should the
charmed church dodge a camera? The gown litters the rhyme.
Another discrete elevator defects over the target.
</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
</div>
</div>
2 ACTUALIZACIÓN:
Este es el codigo que tengo, hos explico esto es una función que luego la llamo en otra página, con esto tengo varios problemas ya que por ejemplo, algunas funciones del stylesheet dejan de funcionar ( Diseño del card de bootstrap pierde todo el estilo dado al meterlo en una función )etc. Los print imprimen las fotos de la base a la pagina.
CODIGO:
/**********************************
Función visualizar las imagenes
que estan en la ruta guardada en la
BD
**********************************/
public function viewImages()
{
$SQLStatement = $this->DBConexion->prepare("SELECT * FROM productosima");
$SQLStatement->execute();
echo'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>';
while($img = $SQLStatement->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="row mx-auto p-3">
<style>
.imagen{
height: 180px;
width: 318px;
background-color: #BDBDBD;
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: inherit;
}
</style>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="imagen" style="background:url"<?php print($img['imagen']); ?>;></div>
<div class="card">
<img src="<?php print($img['imagen']); ?>"
class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
<?php
}
}
}
?>
Aquí es como he colocado lo que me habeis dicho, pero no funciona.
Aquí como lo tengo originalmente:
/**********************************
Función visualizar las imagenes
que estan en la ruta guardada en la
BD
**********************************/
public function viewImages()
{
$SQLStatement = $this->DBConexion->prepare("SELECT * FROM productosima");
$SQLStatement->execute();
echo'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>';
while($img = $SQLStatement->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="row mx-auto p-3">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="card">
<img src="<?php print($img['imagen']); ?>"
class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
<?php
}
}
}
?>
COMO GUARDO LA RUTA:
/**********************************
Función para guardar la ruta de la
Imagen en la base de datos
**********************************/
public function uploadImage($Imagen)
{
$ruta = 'imagenes/'.$Imagen['imagen']['name'];
move_uploaded_file($Imagen['imagen']['tmp_name'],$ruta);
$SQLStatement = $this->DBConexion->prepare("INSERT INTO productosima (imagen) VALUES (:url)");
$SQLStatement->bindParam(":url",$ruta);
$SQLStatement->execute();
}
Gracias