Tengo un problema no se carga la image ya intente instalando url-loader y file-loader pero no funciona alguien puede alguna idea que funciona bueno solo queria si habia alguna manera
-
check_circle_outlineMódulo 1 | 5 clases
Introducción y configuración
expand_more -
check_circle_outlineMódulo 2 | 5 clases
Webpack
expand_more -
check_circle_outlineMódulo 3 | 5 clases
Layout
expand_more -
check_circle_outlineMódulo 4 | 10 clases
Estilos con SASS
expand_more -
check_circle_outlineMódulo 5 | 9 clases
Slider de productos
expand_more -
check_circle_outlineMódulo 6 | 3 clases
Google Maps
expand_more -
check_circle_outlineMódulo 7 | 4 clases
Navegación
expand_more -
check_circle_outlineMódulo 8 | 5 clases
Service Workers (páginas sin internet)
expand_more -
check_circle_outlineMódulo 9 | 4 clases
Subir a producción
expand_more -
check_circle_outlineMódulo 10 | 2 clases
Despedida
expand_more
11 comentario(s)
Problemas con las imágenes solución:
En el curso no esta el momento en crea la carpeta public y hay código en el webpack.config que se agrego en ese momento (supongo que olvido agregar esa parte al video.)
instalen:
$ npm install url-loader --save-dev
y luego deben escribir así el código en la parte de modulo de webpack.config.js
module:{
rules:[
{
test: /\.scss$/,
use: [`style-loader`, `css-loader`, `sass-loader`]
},
{
test:/\.jpg$/,
loader: "url-loader"
}
]
}
Yo por intenet encontre que puedes usar asset, que ya trae por defecto webpack 5, que es la que se instalara por default cuando la instales, y no es necesario instalar url-loader, el codigo es asi:
module:{
rules:[
{
test: /\.scss$/,
use: [`style-loader`, `css-loader`, `sass-loader`]
},
{
type: "asset",
test: /\.(png|jpg|gif)$/i,
}
]
}
Asset no solo sirve para imágenes, igual para otros archivos como fuentes.
En el curso no esta el momento en crea la carpeta public y hay código en el webpack.config que se agrego en ese momento (supongo que olvido agregar esa parte al video.)
instalen:
$ npm install url-loader --save-dev
y luego deben escribir así el código en la parte de modulo de webpack.config.js
module:{
rules:[
{
test: /\.scss$/,
use: [`style-loader`, `css-loader`, `sass-loader`]
},
{
test:/\.jpg$/,
loader: "url-loader"
}
]
}
Yo por intenet encontre que puedes usar asset, que ya trae por defecto webpack 5, que es la que se instalara por default cuando la instales, y no es necesario instalar url-loader, el codigo es asi:
module:{
rules:[
{
test: /\.scss$/,
use: [`style-loader`, `css-loader`, `sass-loader`]
},
{
type: "asset",
test: /\.(png|jpg|gif)$/i,
}
]
}
Asset no solo sirve para imágenes, igual para otros archivos como fuentes.
GET http://localhost:8080/public/images/1.jpg
así es mi distribución
assets
css/app.scss
javascript/entry.js
public/images/1.jpg
index.template.html
<figure>
así es mi distribución
assets
css/app.scss
javascript/entry.js
public/images/1.jpg
index.template.html
<figure>
<img src="./public/images/1.jpg">
<figcaption></figcaption>
</figure>
webpack.config.js
const path = require('path');
webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpack = new htmlWebpackPlugin({
template: './assets/index.template.html',
filename:'index.html'
});
module.exports = {
mode:"development",
entry: './assets/javascript/entry.js',
output: {
publicPath : '/',
path: path.join(__dirname, '..'),
filename: 'dist/javascript/bundle.js'
},
devServer: {
port: 8080,
contentBase: path.join(__dirname, '..'),
hot: true,
open:"chrome"
},
plugins: [htmlWebpack],
module: {
rules : [
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader']
},
{
test: /\.(svg|png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]'
}
}
]
}
]
}
}
Después de dos horas sin poder cargar las imágenes, por fin lo conseguí. Yo al menos no he pagado por este curso, pero si lo hubiera pagado me sentiría estafada de la gran desactualización que tiene y la poca molestía en resolver dudas...
Dejo mi código del webpack.config.json por si a alguien le sirve. también he configurado otro archivo con babel.
const path = require('path');
Dejo mi código del webpack.config.json por si a alguien le sirve. también he configurado otro archivo con babel.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
port: 8080,
contentBase: path.join(__dirname, '..'),
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/index.html'), //
filename: 'index.html', //
})
],
}
Gente Esta es la nueva direccion: https://taller-firebase-cf.firebaseapp.com/
La carpeta public e images créalas por tu cuenta ya que no lo muestra en ningún video.
Para obtener las imágenes: Dirígete a la pagina > Clic Derecho > Guardar Pagina o Guardar Como > Guardar como pagina web completa > En el directorio donde la guardaste se creo una carpeta y un archivo > Las imágenes están en la carpeta > Copia y pega en la carpeta del proyecto > Listo si quieres borra la carpeta y el archivo que guardaste de la pagina.
La carpeta public e images créalas por tu cuenta ya que no lo muestra en ningún video.
Para obtener las imágenes: Dirígete a la pagina > Clic Derecho > Guardar Pagina o Guardar Como > Guardar como pagina web completa > En el directorio donde la guardaste se creo una carpeta y un archivo > Las imágenes están en la carpeta > Copia y pega en la carpeta del proyecto > Listo si quieres borra la carpeta y el archivo que guardaste de la pagina.
¿es posible que el vídeo esté desactualizado? Leo alguna pregunta de 2018.
Tengo la misma pregunta que Ana, por ejemplo...
- ¿en qué vídeo se creó la carpeta public?
y aparte,
- ¿hace falta algo más para que cargue después las imágenes o es igual que en html?
(me pregunto si faltan plugins o algo)
- otro compañero en un vídeo anterior, comentaba que faltaba algo de Parallax
(creo que comentaban que el nombre es url-loader)
- si buscamos nosotros imágenes de stock, ¿cuántas harían falta en total? (poder descargar las mismas de Github o Drive estaría genial)
Perdón por tanta pregunta :-)
Gracias
Tengo la misma pregunta que Ana, por ejemplo...
- ¿en qué vídeo se creó la carpeta public?
y aparte,
- ¿hace falta algo más para que cargue después las imágenes o es igual que en html?
(me pregunto si faltan plugins o algo)
- otro compañero en un vídeo anterior, comentaba que faltaba algo de Parallax
(creo que comentaban que el nombre es url-loader)
- si buscamos nosotros imágenes de stock, ¿cuántas harían falta en total? (poder descargar las mismas de Github o Drive estaría genial)
Perdón por tanta pregunta :-)
Gracias
Hola!
En mi proyecto no me aparece las imagenes. Puede ser que falte algun modulo para que webpack procese las imágenes?
Gracias
En mi proyecto no me aparece las imagenes. Puede ser que falte algun modulo para que webpack procese las imágenes?
Gracias
Clase 12