如何打开带有标签a的图像？答案

【问题标题】：How open image with tag a?如何打开带有标签a的图像？
【发布时间】：2021-05-13 09:01:42
【问题描述】：

要创建我的页面，我使用 webpack。在页面中我想显示多个图像。在互联网上，我找到了库“lightbox2”。该库用于单击图像和弹出窗口。该库有这样的简单示例：

    <a
  class="example-image-link"
  href="../image/bed-small.jpg" -- not work
  href="./469cccac29babd05add3a0b2d23abf0d.jpg" -- work
  data-lightbox="example-1"
  ><img class="example-image" src="../image/bed-small.jpg" alt="image-1" --here work
/></a>

Img src 工作得很好，我在我的页面上看到了图片。当我单击图像弹出工作但图像从未加载时。我使用了开发工具，我看到我的图像是用名称“469cccac29babd05add3a0b2d23abf0d.jpg”下载的。所以我复制并看到我的图像。我的问题是如何在我的 html 文件中动态生成该文件名？下面我添加我的 webpack.conf

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
  entry: {
    main: './js/index.js',
    fontAwesome: './js/fontAwe.js',
    fontSolid: './js/fontSolid.js',
    fontRegular: './js/fontRegular.js',
    galery: './js/galery.js',
  },
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new HtmlWebpackPlugin({
      title: 'none',
      template: './index.html',
      inject: true,
      chunks: ['main', 'fontAwesome', 'fontSolid', 'fontRegular'],
      filename: 'index.html',
    }),
    new HtmlWebpackPlugin({
      title: 'none',
      template: './pages/galeria.html',
      inject: true,
      chunks: ['galery'],
      filename: 'galeria.html',
    }),
  ],
  output: {
    publicPath: '/',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // Prefer `dart-sass`
              implementation: require('sass'),
            },
          },
        ],
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        //IMAGE LOADER
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'file-loader',
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
    ],
  },
};

我的开发工具

不再是最新的。我找到了解决方案。将图像导入 js 文件并更改 href ;)

【问题讨论】：

标签： html npm webpack

【解决方案1】：

更改照片名称并使用：<div class=""><a src="></a>

【讨论】：

它不起作用。我尝试在标签中使用 src 。 Webpack 不生成图像文件。它仍然是这样的路径 src="../image/bed-small.jpg"
比在css中使用它 background-image= url(" ");