自定义开发lwc表示svg图片,有两种实现方式。
1.把svg图片放到静态资源,然后javascript中用import导入。
import SVG_LOGO from '@salesforce/resourceUrl/error_logo';
helloWebComponentCommonError.html
<template>
<lightning-card>
<div class='slds-grid slds-grid--vertical slds-align--absolute-center slds-container--large'>
<div class='slds-align-middle slds-m-bottom--xx-large slds-m-top--xx-large'>
<img src={logoURL} class='slds-p-horizontal--large'/>
</div>
<p class='slds-text-align--center slds-text-heading--medium slds-text-color--weak'>
UseSVGResources
</p>
</div>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
import SVG_LOGO from '@salesforce/resourceUrl/error_logo';
export default class HelloWebComponentCommonError extends LightningElement {
logoURL = SVG_LOGO;
}
效果展示:
<template>
<lightning-card title="MiscStaticResource" icon-name="custom:custom19">
<div class="slds-var-m-around_medium">
<img src={trailheadLogoUrl} alt="Trailhead logo" />
<img src={einsteinUrl} alt="Einstein logo" />
</div>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
import trailheadLogo from '@salesforce/resourceUrl/trailhead_logo';
import trailheadCharacters from '@salesforce/resourceUrl/trailhead_characters';
export default class MiscStaticResource extends LightningElement {
// Expose the static resource URL for use in the template
trailheadLogoUrl = trailheadLogo;
// Expose URL of assets included inside an archive file
einsteinUrl = trailheadCharacters + '/images/einstein.png';
}
效果展示:
2.
SVG (Scalable Vector Graphics) 是基于XML的图像格式,下边这是一个包含红色矩形,绿色圆圈和白色文字的文件示例
<template>
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg" id="logo">
<rect width="100%" height="100%" fill="red"></rect>
<circle cx="150" cy="100" r="80" fill="green"></circle>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
</template>
效果图:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。