Functions

url(path:string): string

依据传入的地址生成一个URL地址,不管组件在何处被使用,这个地址都能正确获取到相对应的资源

path: string

当前你要引用的文件相对于你这个项目根目录的路径

returns: string

一个能够引用到文件的绝对路径

import * as React from "react"
import { Frame } from "framer"
import { url } from "framer/resource"

export function MyComponent() {
  return (
    <Frame image={url("./code/test.png")} size={"100%"} />
  )
}

生成的URL地址会根据你的项目在何处在合适打开来生成正确的地址,所有在组件上使用url这个方法,而不要先用一个变量来存放url方法的返回值。

// GOOD: Use a relative path. Call url() within component. 这样是对的使用方式
const image = "./code/test.png"

export function MyComponent() {
  return <Frame image={url(image)} size={"100%"} />
}
// BAD: Avoid this. The returned url may change over time.  这是错的使用方式
const image = url("./code/test.png")

export function MyComponent() {
  return <Frame image={image} size={"100%"} />
}

Last updated

Was this helpful?