Salesforce学习 Lwc（八）【UseSVGResources】静态资源显示图片

自定义开发lwc表示svg图片，有两种实现方式。

1.把svg图片放到静态资源，然后javascript中用import导入。

代码语言：javascript复制

import SVG_LOGO from '@salesforce/resourceUrl/error_logo';

例子1：

静态资源位置

helloWebComponentCommonError.html

代码语言：javascript复制

<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>

代码语言：javascript复制

import { LightningElement } from 'lwc';
import SVG_LOGO from '@salesforce/resourceUrl/error_logo';
export default class HelloWebComponentCommonError extends LightningElement {
  logoURL = SVG_LOGO;
}

效果展示：

例子2：

添加静态资源

代码语言：javascript复制

<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>

代码语言：javascript复制

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的图像格式，下边这是一个包含红色矩形，绿色圆圈和白色文字的文件示例

代码语言：javascript复制

<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>

效果图：

svg

0 人点赞