Is there a way to make the logo png file visible on the webpage?
I have been encountering issues with loading the image while other elements like HTML, css, and fonts are loading properly when the web pack is started.
List of Error Messages:
Refused to apply style from 'http://localhost:8080/forkify/dist/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
test.js:5 Imported module
index.js:14 Uncaught ReferenceError: element is not defined
at eval (index.js:14)
at Module../src/js/index.js (bundle.js:398)
at __webpack_require__ (bundle.js:432)
at bundle.js:526
at bundle.js:529
logo.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Even after using file and uri loaders in webpack, I am still facing the same issue.
Content of index.js:
import num from './test';
import '../../dist/css/style.css';
import Logo from '../../dist/img/logo.png';
// Displaying the image on the div.
const myIcon = new Image();
myIcon.src = Logo;
element.appendChild(myIcon);
console.log(`I imported ${num} from another module test!`);
Webpack.config.js Configuration:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:'./src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename:'js/bundle.js'
},
devServer: {
contentBase:'./dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
type: "asset/resource",
},
],
},
};
Package.json Details:
{
"name": "forkify",
"version": "1.0.0"
"description": "Food app project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start:dev": "webpack serve --mode development --open"
},
"author": "BrewedLeo",
"license"" "ISC",
"devDependencies"": {
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-webpack-plugin"": "^5.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.20.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies"": {}
}