GALERIA DE PRODUCTOS FLEXBOX GRID-VIEW FOTOS CON CARDS RESPONSIVA DE CSS PURO
CARGAR GALERIA DE PRODUCTOS CON FOTOS CON CARDS RESPONSIVA DE CSS PURO Y CON PHP Y MYSQL HAZME 1 EJEMPLO DEL CODIGO
¡Claro! Te mostraré un ejemplo básico de cómo cargar una galería de productos con fotos utilizando tarjetas (cards) responsivas con CSS puro y PHP y MySQL.
Primero, crearemos una tabla en nuestra base de datos MySQL para almacenar la información de los productos:
SQL
Copy code
CREATE TABLE productos (
id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(255) NOT NULL,
descripcion TEXT,
precio DECIMAL(10,2) NOT NULL,
imagen VARCHAR(255) NOT NULL
);
A continuación, agregaremos algunos datos de ejemplo a la tabla:
SQL
Copy code
INSERT INTO productos (nombre, descripcion, precio, imagen) VALUES
('Producto 1', 'Descripción del producto 1', 9.99, 'producto1.jpg'),
('Producto 2', 'Descripción del producto 2', 19.99, 'producto2.jpg'),
('Producto 3', 'Descripción del producto 3', 29.99, 'producto3.jpg'),
('Producto 4', 'Descripción del producto 4', 39.99, 'producto4.jpg'),
('Producto 5', 'Descripción del producto 5', 49.99, 'producto5.jpg');
Luego, crearemos un archivo PHP que se encargará de conectarse a la base de datos, recuperar los productos y mostrarlos en la página web:
PHP
Copy code
<?php
// Conexión a la base de datos
$servername = "localhost";
$username = "nombre_de_usuario";
$password = "contraseña";
$dbname = "nombre_de_la_base_de_datos";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
// Obtener los productos de la base de datos
$sql = "SELECT id, nombre, descripcion, precio, imagen FROM productos";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galería de productos</title>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 25%;
margin: 10px;
display: inline-block;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
.responsive {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Galería de productos</h1>
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="card">
<img src="<?php echo $row["imagen"]; ?>" alt="<?php echo $row["nombre"]; ?>" class="responsive">
<div class="container">
<h4><b><?php echo $row["nombre"]; ?></b></h4>
<p><?php echo $row["descripcion"]; ?></p>
<p><b>Precio: $<?php echo number_format($row["precio"], 2); ?></b></p>
</div>
</div>
<?php
}
} else {
echo "No se encontraron productos.";
}
$conn
jose fernandez
SEGUIR
</body>
</html>
En este archivo PHP, primero establecemos una conexión con la base de datos utilizando las credenciales de acceso correspondientes. Luego, recuperamos todos los productos de la tabla "productos" utilizando una consulta SQL.
Después, utilizamos un bucle while para iterar sobre cada fila de resultados y mostrarlos en la página web. Para cada producto, creamos una tarjeta (card) utilizando HTML y CSS. La imagen del producto se muestra utilizando la etiqueta <img> y el texto del nombre, descripción y precio se muestra dentro de un div con la clase "container".
Finalmente, cerramos la conexión a la base de datos.
Es importante tener en cuenta que este es solo un ejemplo básico y que se puede personalizar y mejorar según las necesidades específicas de cada proyecto. Además, es importante tener en cuenta las consideraciones de seguridad al interactuar con bases de datos y al mostrar información en una página web.
jose fernandez
TERMINAR EL CODIGO ANTERIOR
¡Claro! Aquí te dejo el código completo para cargar una galería de productos con tarjetas (cards) responsivas utilizando PHP y MySQL:
PHP
Copy code
<?php
// Conexión a la base de datos
$servername = "localhost";
$username = "nombre_de_usuario";
$password = "contraseña";
$dbname = "nombre_de_la_base_de_datos";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
// Obtener los productos de la base de datos
$sql = "SELECT id, nombre, descripcion, precio, imagen FROM productos";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galería de productos</title>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 25%;
margin: 10px;
display: inline-block;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
.responsive {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Galería de productos</h1>
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="card">
<img src="<?php echo $row["imagen"]; ?>" alt="<?php echo $row["nombre"]; ?>" class="responsive">
<div class="container">
<h4><b><?php echo $row["nombre"]; ?></b></h4>
<p><?php echo $row["descripcion"]; ?></p>
<p><b>Precio: $<?php echo number_format($row["precio"], 2); ?></b></p>
</div>
</div>
<?php
}
} else {
echo "No se encontraron productos.";
}
$conn->close();
?>
</body>
</html>
Este código utiliza una conexión a una base de datos MySQL para recuperar los datos de los productos, los cuales se muestran en una galería de productos mediante el uso de tarjetas (cards) responsivas utilizando CSS puro.
jose fernandez
HAZLO CON FLEXBOX
¡Por supuesto! Aquí te muestro cómo puedes crear una galería de productos con tarjetas (cards) responsivas utilizando Flexbox en CSS:
HTML
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galería de productos con Flexbox</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 25%;
margin: 10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card img {
width: 100%;
height: auto;
}
.card-text {
padding: 10px;
}
h4 {
margin: 0;
}
.price {
font-weight: bold;
font-size: 20px;
}
@media (max-width: 768px) {
.card {
width: 50%;
}
}
@media (max-width: 576px) {
.card {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Galería de productos con Flexbox</h1>
<div class="container">
<?php
// Conexión a la base de datos
$servername = "localhost";
$username = "nombre_de_usuario";
$password = "contraseña";
$dbname = "nombre_de_la_base_de_datos";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
// Obtener los productos de la base de datos
$sql = "SELECT id, nombre, descripcion, precio, imagen FROM productos";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="card">
<img src="<?php echo $row["imagen"]; ?>" alt="<?php echo $row["nombre"]; ?>">
<div class="card-text">
<h4><?php echo $row["nombre"]; ?></h4>
<p><?php echo $row["descripcion"]; ?></p>
<p class="price">$<?php echo number_format($row["precio"], 2); ?></p>
</div>
</div>
<?php
}
} else {
echo "No se encontraron productos.";
}
$conn->close();
?>
</div>
</body>
</html>
En este ejemplo, utilizamos Flexbox para crear un contenedor principal con la clase "container" que alberga las tarjetas (cards) de los productos. Utilizamos la propiedad "flex-wrap" con el valor "wrap" para que las tarjetas se ajusten automáticamente al ancho de la pantalla y se envuelvan en varias líneas si es necesario.
Para las tarjetas, utilizamos la propiedad "flex" para establecer un an
jose fernandez
HAZLO CON Responsive Flexbox 320 PX
¡Claro! Aquí te muestro cómo puedes adaptar la galería de productos con tarjetas (cards) responsivas utilizando Flexbox en CSS para dispositivos móviles con un ancho de pantalla de hasta 320px:
HTML
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galería de productos con Flexbox</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 100%;
margin: 10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card img {
width: 100%;
height: auto;
}
.card-text {
padding: 10px;
}
h4 {
margin: 0;
}
.price {
font-weight: bold;
font-size: 20px;
}
@media (min-width: 321px) and (max-width: 768px) {
.card {
width: 50%;
}
}
@media (max-width: 320px) {
.card {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Galería de productos con Flexbox</h1>
<div class="container">
<?php
// Conexión a la base de datos
$servername = "localhost";
$username = "nombre_de_usuario";
$password = "contraseña";
$dbname = "nombre_de_la_base_de_datos";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
// Obtener los productos de la base de datos
$sql = "SELECT id, nombre, descripcion, precio, imagen FROM productos";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="card">
<img src="<?php echo $row["imagen"]; ?>" alt="<?php echo $row["nombre"]; ?>">
<div class="card-text">
<h4><?php echo $row["nombre"]; ?></h4>
<p><?php echo $row["descripcion"]; ?></p>
<p class="price">$<?php echo number_format($row["precio"], 2); ?></p>
</div>
</div>
<?php
}
} else {
echo "No se encontraron productos.";
}
$conn->close();
?>
</div>
</body>
</html>
En este ejemplo, agregamos dos reglas de medios (media queries) para adaptar la galería de productos a diferentes tamaños de pantalla. La primera regla de medios se aplica para dispositivos móviles con un ancho de pantalla entre 321px y 768px, y establece que las tarjetas (cards
jose fernandez
HAZLO CON Responsive Grid-View 320PX
¡Por supuesto! Aquí te muestro cómo puedes adaptar la galería de productos con una vista de cuadrícula responsiva utilizando CSS Grid para dispositivos móviles con un ancho de pantalla de hasta 320px:
HTML
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galería de productos con Grid-View</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
justify-items: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card img {
width: 100%;
height: auto;
}
.card-text {
padding: 10px;
}
h4 {
margin: 0;
}
.price {
font-weight: bold;
font-size: 20px;
}
@media (min-width: 321px) and (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (max-width: 320px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
}
</style>
</head>
<body>
<h1>Galería de productos con Grid-View</h1>
<div class="grid-container">
<?php
// Conexión a la base de datos
$servername = "localhost";
$username = "nombre_de_usuario";
$password = "contraseña";
$dbname = "nombre_de_la_base_de_datos";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
// Obtener los productos de la base de datos
$sql = "SELECT id, nombre, descripcion, precio, imagen FROM productos";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<div class="card">
<img src="<?php echo $row["imagen"]; ?>" alt="<?php echo $row["nombre"]; ?>">
<div class="card-text">
<h4><?php echo $row["nombre"]; ?></h4>
<p><?php echo $row["descripcion"]; ?></p>
<p class="price">$<?php echo number_format($row["precio"], 2); ?></p>
</div>
</div>
<?php
}
} else {
echo "No se encontraron productos.";
}
$conn->close();
?>
</div>
</body>
</html>
En este ejemplo, utilizamos la propiedad grid-template-columns para definir el número de columnas y su ancho
jose fernandez
HAZLO CON FETCH POST API JSON PHP MYSQL PAGINACION
¡Claro! Aquí te muestro cómo puedes crear una galería de productos con paginación utilizando una API Fetch para obtener datos de un archivo JSON, un archivo PHP que hace la conexión a la base de datos MySQL y la paginación, y CSS para darle estilo a la galería.
Primero, crearemos el archivo HTML con una estructura básica y enlazaremos nuestro archivo JavaScript y CSS:
HTML
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Galería de productos con paginación</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Galería de productos con paginación</h1>
<div class="gallery"></div>
<div class="pagination"></div>
<script src="app.js"></script>
</body>
</html>
Luego, crearemos el archivo CSS para darle estilo a la galería:
CSS
Copy code
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery .card {
margin: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: calc(33.33% - 20px);
}
.gallery .card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.gallery .card img {
width: 100%;
height: auto;
}
.gallery .card-text {
padding: 10px;
}
.gallery h4 {
margin: 0;
}
.gallery .price {
font-weight: bold;
font-size: 20px;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.pagination button.active {
background-color: #008CBA;
}
Después, crearemos el archivo JavaScript que utilizará Fetch API para obtener datos de un archivo JSON que contiene la información de los productos, un archivo PHP para obtener los datos de la base de datos MySQL y la paginación, y también para construir la galería y la paginación:
JavaScript
Copy code
const gallery = document.querySelector('.gallery');
const pagination = document.querySelector('.pagination');
let currentPage = 1;
let productsPerPage = 9;
let totalPages = 0;
let products = [];
function getProducts(page) {
fetch(`getProducts.php?page=${page}&limit=${productsPerPage}`)
.then(response => response.json())
.then(data => {
products = data.products;
totalPages = data.totalPages;
buildGallery();
buildPagination();
})
.catch(error => console.error(error));
}
function buildGallery() {
gallery.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
const image = document.createElement('img');
image.src = product.imagen;
image.alt = product.nombre;
const cardText = document.createElement('div');
cardText.classList.add('card-text');
const name = document.createElement('h4');
name.textContent = product.nombre;
const description = document.createElement('p');
description.textContent = product.descripcion;
const price = document
jose fernandez
HAXLO COMPLETO CODIGO ANTERIOR
Perdón, aquí está el código completo:
HTML:
HTML
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Galería de productos con paginación</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Galería de productos con paginación</h1>
<div class="gallery"></div>
<div class="pagination"></div>
<script src="app.js"></script>
</body>
</html>
CSS:
CSS
Copy code
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
.gallery .card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.gallery .card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.gallery .card img {
width: 100%;
height: auto;
}
.gallery .card-text {
padding: 10px;
}
.gallery h4 {
margin: 0;
}
.gallery .price {
font-weight: bold;
font-size: 20px;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.pagination button.active {
background-color: #008CBA;
}
JavaScript:
JavaScript
Copy code
const gallery = document.querySelector('.gallery');
const pagination = document.querySelector('.pagination');
let currentPage = 1;
let productsPerPage = 9;
let totalPages = 0;
let products = [];
function getProducts(page) {
fetch(`getProducts.php?page=${page}&limit=${productsPerPage}`)
.then(response => response.json())
.then(data => {
products = data.products;
totalPages = data.totalPages;
buildGallery();
buildPagination();
})
.catch(error => console.error(error));
}
function buildGallery() {
gallery.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
const image = document.createElement('img');
image.src = product.imagen;
image.alt = product.nombre;
const cardText = document.createElement('div');
cardText.classList.add('card-text');
const name = document.createElement('h4');
name.textContent = product.nombre;
const description = document.createElement('p');
description.textContent = product.descripcion;
const price = document.createElement('div');
price.classList.add('price');
price.textContent = `$${product.precio}`;
cardText.appendChild(name);
cardText.appendChild(description);
cardText.appendChild(price);
card.appendChild(image);
card.appendChild(cardText);
gallery.appendChild(card);
});
}
function buildPagination() {
pagination.innerHTML = '';
for(let i = 1; i <= totalPages; i++) {
const button = document.createElement('button');
button.textContent = i;
if(i === currentPage) {
button.classList.add('active');
}
button.addEventListener('click', () => {
currentPage = i;
getProducts(currentPage);
});
pagination.appendChild(button);
}
}
getProducts(currentPage);
En este ejemplo, utilizamos
jose fernandez
HAZLO CON FETCH POST API JSON PHP MYSQL sin paginacion
Aquí tienes el ejemplo completo de cómo cargar una galería de productos utilizando Fetch API, POST, JSON, PHP, y MySQL sin paginación:
HTML:
HTML
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Galería de productos sin paginación</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Galería de productos sin paginación</h1>
<div class="gallery"></div>
<script src="app.js"></script>
</body>
</html>
CSS:
CSS
Copy code
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
.gallery .card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.gallery .card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.gallery .card img {
width: 100%;
height: auto;
}
.gallery .card-text {
padding: 10px;
}
.gallery h4 {
margin: 0;
}
.gallery .price {
font-weight: bold;
font-size: 20px;
}
JavaScript:
JavaScript
Copy code
const gallery = document.querySelector('.gallery');
fetch('getProducts.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({action: 'getProducts'})
})
.then(response => response.json())
.then(products => buildGallery(products))
.catch(error => console.error(error));
function buildGallery(products) {
gallery.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
const image = document.createElement('img');
image.src = product.imagen;
image.alt = product.nombre;
const cardText = document.createElement('div');
cardText.classList.add('card-text');
const name = document.createElement('h4');
name.textContent = product.nombre;
const description = document.createElement('p');
description.textContent = product.descripcion;
const price = document.createElement('div');
price.classList.add('price');
price.textContent = `$${product.precio}`;
cardText.appendChild(name);
cardText.appendChild(description);
cardText.appendChild(price);
card.appendChild(image);
card.appendChild(cardText);
gallery.appendChild(card);
});
}
PHP:
PHP
Copy code
<?php
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'mydatabase';
$conn = mysqli_connect($host, $username, $password, $database);
if(!$conn) {
die('Connection failed: ' . mysqli_connect_error());
}
$action = $_POST['action'];
if($action === 'getProducts') {
$sql = 'SELECT * FROM products';
$result = mysqli_query($conn, $sql);
$products = [];
while($row = mysqli_fetch_assoc($result)) {
array_push($products, $row);
}
echo json_encode($products);
}
mysqli_close($conn);
?>
En este ejemplo, utilizamos Fetch API para enviar una solicitud POST al archivo PHP que se encarga de realizar la consulta a la base de datos y devolver los productos en formato JSON. Luego, utilizamos JavaScript para construir la galería de productos utilizando los datos devu
jose fernandez
getProducts.php hazlo con pdo php
Aquí tienes un ejemplo de cómo obtener los productos de una base de datos MySQL utilizando PDO en PHP:
PHP
Copy code
<?php
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'mydatabase';
try {
$conn = new PDO("mysql:host=$host;dbname=$database", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = 'SELECT * FROM products';
$stmt = $conn->prepare($sql);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($products);
} catch(PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
$conn = null;
?>
En este ejemplo, primero creamos una instancia de PDO con los detalles de la conexión a la base de datos. Luego, preparamos y ejecutamos una consulta SQL para obtener los productos de la tabla products. Utilizamos el método fetchAll() para obtener todos los resultados en un arreglo asociativo y finalmente, enviamos los datos en formato JSON utilizando la función json_encode(). En caso de error, capturamos la excepción y la mostramos en pantalla.
jose fernandez
image.src = agregar url caperta uploads
Suponiendo que deseas agregar una carpeta "uploads" a la ruta de la imagen, podrías hacerlo de la siguiente manera:
javascript
Copy code
// Suponiendo que la variable "imagePath" contiene la ruta de la imagen sin la carpeta "uploads"
var imagePath = "imagen.jpg";
// Creamos una nueva imagen y le asignamos la ruta completa incluyendo la carpeta "uploads"
var image = new Image();
image.src = "uploads/" + imagePath;
De esta forma, al agregar la cadena "uploads/" al inicio de la ruta de la imagen, estaríamos apuntando a la carpeta "uploads" que se encuentra en el mismo nivel que la página donde se está ejecutando el código. Si la carpeta "uploads" se encuentra en un nivel superior o en una ruta diferente, entonces deberías ajustar la ruta en consecuencia.
jose fernandez
<img src="'uploads/'<?php echo $row["foto"]; ?>" corregime el "'uploads/'
Claro, el código corregido quedaría de la siguiente manera:
html
Copy code
<img src="uploads/<?php echo $row["foto"]; ?>" alt="Foto del producto">
En este caso, estamos utilizando la etiqueta img de HTML para mostrar una imagen en la página web, y utilizando PHP para imprimir la ruta de la imagen que está almacenada en la variable $row["foto"]. Agregamos la cadena "uploads/" antes de la variable PHP para indicar que la imagen se encuentra en la carpeta "uploads" dentro del directorio raíz del sitio web. La ruta resultante debe estar dentro de las comillas dobles que delimitan el valor del atributo src. También agregamos un atributo alt para proporcionar una descripción de la imagen en caso de que no se pueda cargar.
Comentarios
Publicar un comentario