不能在 webpack 中使用 <img> 标签
Posted
技术标签:
【中文标题】不能在 webpack 中使用 <img> 标签【英文标题】：Can't use <img> tags with webpack 【发布时间】：2021-11-19 23:59:46 【问题描述】：最近，我一直在尝试通过 html 文件在我的 webpack 项目中使用图像。当我用它的实际路径调用图像时，它只会显示一个损坏的图像图标。我曾尝试使用<img src="<%= require() %>"/>，正如我在互联网上看到的那样，还使用import './assets/C.png' 在javascript 上导入它们，但似乎没有任何效果，只是显示那个烦人的图标。当您去检查并查看来源时，您会看到图像但实际上看不到照片：
但实际上，CSS样式表上调用的png文件是正确捆绑的：
谁能向我解释为什么会发生这种情况或如何解决它？谢谢，如果您需要更多文件，请告诉我，这是我的代码；
webpack.config.js：
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports =
entry: path.resolve(__dirname, '../src/script.js'),
output:
path: path.resolve(__dirname, "../dist"),
filename: "bundle.[contenthash].js"
,
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin(
patterns: [
from: path.resolve(__dirname, '../static')
]
),
new HtmlWebpackPlugin(
template: path.resolve(__dirname, '../src/index.html'),
minify: true
),
new MiniCSSExtractPlugin()
],
module:
rules:
[
// HTML
test: /\.(html)$/,
use: ['html-loader']
,
// JS
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
,
// CSS
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
,
// Images
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
,
// Fonts
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
loader: 'file-loader',
options:
outputPath: 'assets/fonts/'
]
]
index.html：
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My page</title>
<script defer src="script1.js"></script>
<script src="script2.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./assets/C.png" type="image/x-icon">
</head>
<body>
<div class="headerdiv">
<a class="logo" href="/"><img class="logoimg" src="./assets/CREAT_extended_blue.png"></a>
<nav>
<ul class="nav__links">
<li><a href="index.php" class="active">Página principal</a></li>
<li><a href="vender.php">Vender un producto</a></li>
<li><a href="#carrito">Carrito de la compra</a></li>
<li><a href="micuenta.php">Mi cuenta</a></li>
<li><a href="info.html">Información</a></li>
</a></li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p class="menu cta">Buscar</p>
</div>
<div id="mobile__menu" class="overlay">
<a class="close">×</a>
<div class="overlay__content">
<a href="index.php" class="active">Página principal</a>
<a href="vender.php">Vender un producto</a>
<a href="#carrito">Carrito de la compra</a>
<a href="micuenta.php">Mi cuenta</a>
<a href="info.html">Información</a>
</div>
</div>
<script type="text/javascript" src="mobile.js"></script>
</script>
<header data-aos="fade-up" class="cabecera-inicio" id="hero-image">
<canvas class="webgl"></canvas>
<script src="script.js"></script>
</header>
<div class="page-content">
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
<footer>
<div class="textos-destacado" >
</br>
<h1 data-aos='fade-up'>
<b> This is a title </b>
</h1>
</div>
<div class="sponsor">
<img data-aos='fade-left' src="./assets/hoja2.png"/>
<div class="sponsor-producto">
</div>
<img data-aos='fade-right' src="./assets/hoja2.png"/>
</div>
</footer>
</html>
我的项目分布：
【问题讨论】：
【参考方案1】：嗯，课程提供的文件有一个尚未修复的错误，因此我必须使用资产模块修复该错误。
【讨论】：
以上是关于不能在 webpack 中使用 <img> 标签的主要内容，如果未能解决你的问题，请参考以下文章
无法在 React + Webpack 中传递相对 img src 路由
如何使用 webpack 将本地图像加载到 html 中的元标记
Vue.js img src 使用绝对路径（django+webpack）