小编Vin*_*ati的帖子

VueJs 不显示 SVG

我正在使用 VueJs 创建一个单页应用程序,但我面临的问题是我的所有 SVG 都没有被渲染。我正在使用 webpack-simple CLI,我正在使用 SLDS(Salesforce Lightning 设计系统)作为 CSS 框架,它为我提供了我所有的 svg。

这是我不显示 SVG 的组件之一:

export default {
        props: ['tabData']
    }
Run Code Online (Sandbox Code Playgroud)
<template>
    <li class="slds-context-bar__item slds-context-bar__item_tab" role="presentation">
        <a href="javascript:void(0);" class="slds-context-bar__label-action" role="tab" title="Tab Item 2"
           aria-selected="false" tabindex="-1" aria-controls="context-tab-panel-3" id="context-tab-id-3">
            <div class="slds-icon_container" :title="tabData.tabName">
                <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink"
                         xlink:href="../../assets/lightning/assets/icons/standard-sprite/svg/symbols.svg#case"/>
                </svg>
            </div>
            <span class="slds-truncate" :title="tabData.tabName">{{ tabData.tabName }}</span>
        </a>
        
        <div class="slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none">
            <button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small"
                    aria-haspopup="true"
                    tabindex="-1">
                <svg class="slds-button__icon" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink"
                         xlink:href="../../assets/lightning/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"/>
                </svg>
            </button>
        </div> …
Run Code Online (Sandbox Code Playgroud)

svg vue.js salesforce-lightning

5
推荐指数
1
解决办法
4856
查看次数

标签 统计

salesforce-lightning ×1

svg ×1

vue.js ×1