Import a Static Resource

同学们，我们来一起看看怎么在 Lightning Web Components 里优雅地使用静态资源。 首先，你需要理解一个特殊的模块作用域，叫作 `@salesforce/resourceUrl`。这个模块就是 Salesforce 给你提供的一个快捷方式，让你能直接拿到你上传到静态资源里的文件的网址。 基本语法很简单，你只要在你的 JavaScript 文件顶部写上一句 `import`，后面加上你的静态资源的“设置名称”。这个名字就是在 Salesforce 设置里，你给那个静态资源取的名字。比如说，你上传了一张图片，命名叫 `trailhead_sys`，那你就可以写： ```javascript import TRAILHEAD_SYS from '@salesforce/resourceUrl/trailhead_sys'; ``` 如果是在托管包里，为了防止名字冲突，需要在命名空间前面加上双下划线。比如命名空间是 `myNS`，静态资源叫 `myResource`，那就写成 `import MY_RESOURCE from '@salesforce/resourceUrl/myNS__myResource';` 注意这里的双下划线，是托管包的规范写法。 接下来，在 JavaScript 里你拿到这个导入的 URL 后，需要把它赋值给一个组件的属性，这样模板才能用到它。通常是这么做的： ```javascript export default class MyComponent extends LightningElement { trailheadSysUrl = TRAILHEAD_SYS; } ``` 那静态资源呢，可以是一个单独的文件，比如一张图片、一个 CSS 文件，直接用这个 URL 就能访问了。但还有一种情况，静态资源是一个打包好的压缩文件，里面可能有很多文件和文件夹结构。这个时候，你拿到的 `TRAILHEAD_SYS` URL 其实只是一个基础路径，指向这个压缩包的根目录。如果你想访问压缩包里的某个具体文件，比如里面 `images` 文件夹下的一张 `einstein.png`，你就得把基础 URL 和具体文件的路径拼接起来： ```javascript this.trailheadQualtsUrl = TRAILHEAD_QUALTS + '/images/einstein.png'; ``` 在我们给出的例子里，`TRAILHEAD_SYS` 是直接使用的单个文件，而 `TRAILHEAD_QUALTS` 是一个存档文件，示例里就演示了怎么通过基础路径拼接子路径拿到里面的图片。 最后，在 HTML 模板中，你就可以像平时绑定属性一样，用花括号 `{Property}` 来引用这些 URL 了。比如： ```html ``` 或者针对压缩包里的文件： ```html ``` 这样，静态资源就顺利用在你的组件里了。整个过程其实很直白：导入，赋值，必要时拼接路径，然后模板绑定。 好了，关于静态资源的使用就讲到这里。大家有问题随时问哦。