如何在 spring-boot:run 之后显示 svg 图标答案

【问题标题】：How I can make svg icons appear after spring-boot:run如何在 spring-boot:run 之后显示 svg 图标
【发布时间】：2019-05-24 18:03:14
【问题描述】：

我正在尝试从 sprite.svg 文件中放置 som 图标

这是我的组件在 react 中的片段，我想在其中放置图像。和 webpack 配置。我将 sprite.svg 放在 href 中，但它不起作用。我需要更改我的 webpack.config，还是安装一些模块？

<div className="product__actions">
    <div className="rating">
        <svg width="20px" height="20px" xmlns="http://www.w3.org/1999/xlink">
            <use xlinkHref="#icon-rating"/>
        </svg>
        <span className="rating__result">{this.props.product.money_value}</span>
    </div>
 </div>

这是我的 webpack 配置

const path = require('path');

module.exports = {
    entry: {
        home: './src/main/js/home/home.js',
        products: './src/main/js/products/products.js',
        ....
        _catalog: './src/main/resources/styles/_catalog.scss',
        ....

    },
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/[name].bundle.js'
    },
    module: {
        rules: [
            ...
            {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                include: [path.join(__dirname, "src/assets")],
                loader: "file-loader?name=assets/[name].[ext]"
            }
            ...
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './src/main/resources/static/css/[name].css'
        }),
        new MergeIntoSingleFilePlugin({
            files: {
                "./src/main/resources/static/styles/styles.css": [
                    './src/main/resources/static/css/_catalog.css',
                    .....
                ]
            }
        })
    ]
};

如何解决这个问题，请帮忙！

【问题讨论】：

您的 html 上缺少一个结束 div 标记。这只是一个错字还是您在代码中的方式？
看起来xlink 属性已被弃用。文档是developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href。尝试使用href
另外，因为你是骆驼外壳xlinkHref react 可能将其视为道具而不是内置属性。
感谢您的回复，尝试放置 href，div 标签只是一个错字，是的。不幸的是，没有任何改变
#icon-rating 元素在哪里？

标签： javascript reactjs svg webpack

【解决方案1】：

我应该使用正确的 sprite.svg 文件的完整路径

<use href="./resources/static/sprite.svg#icon-rating"/>

对我有用

【讨论】：