Unable to import static file (images) when using tamagui@latest #2461
Replies: 3 comments 5 replies
-
|
Migrated to discussion, this is something you have to set up right and we don't have docs yet, if you want to help document and figure out a good pattern that'd be useful. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Nate, thanks for the timely feedback. How do I set it up right? and I wouldn't mind helping with the documentation. How do I proceed with this? |
Beta Was this translation helpful? Give feedback.
-
|
I resolved the issue by;
|
Beta Was this translation helpful? Give feedback.
-
|
@akinwale-habibullah do you have specific examples of what this looks like? It would realy help with documentation which I'd be happy to tackle. |
Beta Was this translation helpful? Give feedback.
-
|
For me worked adding this to declare global {
type LocalImageSource =
| {
src: string
width: number
height: number
blurDataURL: string
blurWidth: number
blurHeight: number
}
| number
declare module '*.png' {
const content: LocalImageSource
export default content
}
declare module '*.jpg' {
const content: LocalImageSource
export default content
}
}
|
Beta Was this translation helpful? Give feedback.
-
|
@KROT47 So after you add the above, how would one reference a .svg example in a React component? Can you please give an example? |
Beta Was this translation helpful? Give feedback.
-
|
@whittenator Just declare your svg declaration.
But if you want to use local svgs, I would recommend to build jsx components that contain your svg instead of loading them from an asset folder. You can do this with react-native-svg |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the solution provided by @akinwale-habibullah and @KROT47 I think this can be useful for some more people. To load the image in the end I have build a AssetImage component which depending on react-native or next.js loads images properly: import React from 'react'
import { Image } from '@my/ui'
interface AssetImageProps {
icon: number | { src: string }
}
const AssetImage: React.FC<AssetImageProps> = ({ icon }) => {
if (typeof icon === 'number') {
return <Image height={100} width={100} source={icon} />
}
return <Image height={100} width={100} src={icon.src} />
}
export default AssetImageWe just need to differentiate between the type number as React Native is handling local assets differently. I have tested this for .jpg .webp and .png. For SVGs it is not working on React Native, but I rather would recommend to use react-native-svg for this case. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Current Behavior
On creating a new tamagui starter app using npm create tamagui@latest, which is currently 1.92.0, and selecting the
Free - Expo + Next in a production ready monorepo.I created an
assetsfolder in the packages/app folder and drop some images there.Currently, if I import the file like this:
I get this error:
Expected Behavior
I dont expect any error. I expect to be able to use this image in an Image tag's source prop
Tamagui Version
Platform (Web, iOS, Android)
Reproduction
System Info
Beta Was this translation helpful? Give feedback.
All reactions