[英]webpack - not able to resolve image src path
This is my project directory:这是我的项目目录:
src
-components
-Header
-index.jsx
webpack
-webpack.base.js
-webpack.dev.js
In my App.jsx
,在我的App.jsx
中,
return (
<img src="@/assets/images/components/header/logo-header.png" alt="logo" class="header__icon"/>
)
After I run npm start
, the image is not shown.运行npm start
后,图像未显示。
package.json package.json
"scripts": {
"start": "webpack-dev-server --config ./webpack/webpack.dev.js"
},
utils.js实用程序.js
const path = require('path')
module.exports = {
resolve: function(dir) {
return path.join(__dirname, '..', dir)
}
}
webpack.base.js webpack.base.js
const webpack = require("webpack");
const utils = require('./utils')
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.jsx",
resolve: {
alias: {
'@': utils.resolve('src'),
},
extensions: ["*", ".js", ".jsx"]
},
module: {
rules: [...],
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html",
filename: "index.html"
})
],
};
webpack.dev.js webpack.dev.js
const { merge } = require("webpack-merge");
const base = require("./webpack.base");
const Dotenv = require("dotenv-webpack");
module.exports = merge(base, {
mode: "development",
devtool: "inline-source-map",
output: {
path: '/',
},
devServer: {
port: 3000,
static: true
}
});
I tried to add file-loader
in webpack but still not working.我试图在 webpack 中添加file-loader
,但仍然无法正常工作。
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
You can use Asset Management#Loading Images .您可以使用Asset Management#Loading Images 。 You can adjust the file path according to your file directory structure.您可以根据自己的文件目录结构调整文件路径。
Eg例如
Directory structure:目录结构:
⚡ tree -L 4 -I 'node_modules'
.
├── package-lock.json
├── package.json
├── src
│ ├── assets
│ │ └── images
│ │ └── logo.png
│ ├── index.html
│ └── index.jsx
└── webpack.config.js
3 directories, 6 files
src/index.jsx
: src/index.jsx
:
import React from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div>
<img src={require("@/assets/images/logo.png")} alt="logo" />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
webpack.config.js
: webpack.config.js
:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.jsx",
output: {
path: path.resolve(__dirname, "./dist"),
},
mode: "development",
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
extensions: ["*", ".js", ".jsx"],
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./src/index.html"),
}),
],
devServer: {
static: {
directory: path.join(__dirname, "dist"),
},
port: 9000,
},
};
package.json
: package.json
:
{
"name": "70107481",
"scripts": {
"build": "webpack",
"start": "webpack serve"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.64.3",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
Start the webpack dev server via npm start
.通过npm start
webpack 开发服务器。 Result:结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.