當我創建一個 HTML 檔案并使用具有相對路徑的影像時，webpack 可以按照指示將檔案保存在 dist/images 檔案夾中。
但是，當我的 JS 腳本添加相同的相對影像 URL 時，webpack 似乎無法找到影像，因此我猜無法將影像保存在 dist/images 檔案夾中
所以我的問題是
我在下面的代碼中做錯了嗎？（我已經仔細檢查了影像的路徑，甚至使用了 JS 中的原始路徑以確保它不是錯誤的路徑）
或者
由于影像是由 javascript 加載的，這是否意味著 webpack 不會保存初始 HTML 檔案中未加載的影像？（我希望這不是真的……）
任何建議將不勝感激。
這是我在 HTML 中的“模板”部分
<template>
<div >
<div >
<figure >
<picture>
<img
src="./assets/images/product/eyeglass/luxury/chopard/chopard-schf11s.jpg"
alt="當 Javascript 創建相對影像 URL 時，Webpack 不會保存影像，但當 HTML 中存在相同的相對影像 URL 時會保存它們"
/>
</picture>
</figure>
</div>
<div >
<h4 >Chopard</h4>
<p >Name of the product</p>
<!-- <p >Description of the product</p> -->
<div data-rating="05">
<span data-rating="05"
>star star star star star</span
>
<span data-votes="100"
>from 100 reviews</span
>
</div>
</div>
<div >
<div >
<span
><span >$120</span></span
>
<span >$120</span>
</div>
<button>Buy Now</button>
</div>
</div>
</template>
這是我的 JS
const cardTemplate = document.querySelector("template");
const cards = document.querySelector(".cards");
// deleted the text where the productObject was created to save space
export function displayProductCards() {
console.log(cards);
productObjects.forEach((product) => {
const card = cardTemplate.content.cloneNode(true).children[0];
const productName = card.querySelector(".product__name");
const productBrand = card.querySelector(".product__brand");
const productImage = card.querySelector(".product__image>picture>img");
// const productDescription = card.querySelector(".product__description");
const productPrice = card.querySelector(".product__price");
const productRating = card.querySelector(
".product__rating>span.material-icons"
);
const productVotes = card.querySelector(".product__votes");
// const imgUrl = `./assets/images/product/${product.category.toLowerCase()}/${product.subCategory.toLowerCase()}/${
// product.brandShortname
// }/${product.image}`;
const imgUrl = `./assets/images/product/eyeglass/luxury/chopard/chopard-schf11s.jpg`;
productName.textContent = product.name;
productBrand.textContent = product.brand;
productImage.src = imgUrl;
productPrice.textContent = product.price;
productRating.setAttribute("data-rating", product.rating);
productRating.textContent = setRating(product.rating);
productVotes.textContent = `from ${product.votes} votes`;
cards.appendChild(card);
});
}
function setRating(x) {
let stars = "";
for (let i = 0; i < x; i ) {
stars = "star ";
}
return stars.trim();
}
這是我的 webpack 組態檔
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: "./src/main.js",
output: {
publicPath: "",
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
clean: true,
assetModuleFilename: "./images/[name][ext][query]",
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
new MiniCssExtractPlugin({ filename: "[name].css" }),
],
module: {
rules: [
{
test: /\.s?css$/,
// use: ["style-loader", "css-loader", "sass-loader"],
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(svg|png|jpg|jpeg|gif)$/,
type: "asset/resource",
},
],
},
};
uj5u.com熱心網友回復：
這個答案主要是針對我將來如果我再次遇到這個問題以及像我這樣可能在未來某個時候在同一學習路徑上的人。
所以我的理解是 webpack 會自動將所有影像保存在 dist/images 檔案夾中，就像我在 webpack 組態檔中定義的那樣
output: {
publicPath: "",
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
clean: true,
assetModuleFilename: "./images/[name][ext][query]",
},
然而，我在 JS 檔案中所做的是模擬獲取操作，在該操作中我將獲取 JSON 資料并填充產品卡中所有影像的 src 屬性。事后看來，期望這些影像存盤在 dist/images 檔案夾中似乎不合邏輯，所以基本上我的期望是不正確的。如果 webpack 真的要將所有這些影像存盤在 dist/images 檔案夾中，那么每次我動態獲取 JSON 以在在線商店上顯示我的所有影像時，這將是一個巨大的檔案夾。
所以首先我的期望不合邏輯，其次我錯過了運行 webpack-dev-server 時顯示的這條訊息..
<i> [webpack-dev-server] Content not from webpack is served from '/Applications/MAMP/htdocs/sunshyn-optical-store/public' directory
所以基本上我的影像沒有顯示在本地主機上顯示的站點上的原因不是因為影像沒有存盤在 dist/images 檔案夾中（無論如何都不應該存盤在那里），而是因為所有相關影像的公共路徑是 webpack 生成的公共檔案夾路徑。
所以我創建了一個public檔案夾并將該檔案夾添加到assets公用檔案夾中，并且修復了丟失的鏈接。影像顯示得很好。
因此，當期望看到在 html 上動態更新的影像時，請通過提供絕對路徑或確保相對路徑與公用檔案夾相關來確保路徑存在。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/425757.html
標籤：javascript 网页包
上一篇：防止獨立聯合模塊中的ID沖突