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

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

<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';
}

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