Вопрос о файлах динамического изображения с использованием веб-пакета и экспресс-печати: в настоящее время только в режиме разработки, поэтому все локально.
Я перебираю список продуктов, в которых хочу динамически ссылаться на статический файл с помощьюid продукта:
{products.map(product => {
return (
...
<img src={`../../../../public/assets/img/prod_${product.id}.jpg`}></img>
...
);
})}
в моей конфигурации веб-пакета:
const webpack = require("webpack");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.config.base");
module.exports = merge(baseConfig, {
mode: "development",
entry: {
app: ["webpack-hot-middleware/client"],
},
output: {
path: __dirname,
},
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "file-loader",
},
],
},
],
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: '"dev"',
},
}),
],
});
Если я попробую URL-адрес прямого изображения, как показано в разметке JSX выше, он вернет 404.
Я не уверен, что это правильный способ создания динамических файловых источников.В прошлом для статических файлов я использовал import image1 from "../../assets/img/image1.jpg, а затем использовал image1 внутри моей разметки.
Я пробовал require.context: const pathToImgs = require.context("./use/path", true); без успеха:
Не удается найти модуль 'prod_1.jpg'
Недавно я попытался добавить все импорта в файл JS перед рендерингом:
import prod_1 from "./assets/img";
import prod_2 from "./assets/img";
import prod_3 from "./assets/img";
import prod_4 from "./assets/img";
import prod_5 from "./assets/img";
import prod_6 from "./assets/img";
, в данном случае комплектсбои:
Модуль не найден: ошибка: невозможно разрешить './assets/img' в '/ Users / admin / devProj / shopping_cart / src / scripts / features / ProductsList'
Что не так с моим публичным путем?