[Bug] CImage not show relative image from local assets folder

[izcream]

Describe the bug
CImage component is not show image when call from assets folder

To Reproduce
Steps to reproduce the behavior:
import image from assets path(src/assets/...) image will not show

Screenshots

Result

folder structor

Desktop (please complete the following information):

• OS: Mac Os
• Browser: Microsoft Edge(79.0.309.71), Google Chrome(83.0.4103.97)

Additional context
Code for test this issue gist

ps. sorry if im do report wrong 😅

[codebender828]

Oh. Good catch. Sorry about this inconvenience. I think i have an idea about what's going on.

I can suggest two workarounds for now.

Workaround 1.
Try including the asset path inside a require() statement. That might be the issue.

Workaround 2. (For latest version 0.5.11)
Try using normal img with the v-chakra directive

See docs: https://vue.chakra-ui.com/v-chakra

Let me know if these work arounds work for you in the meantime. 🙏

At the moment I'm writing my thesis so I need to focus a bit on school. I won't be able to work on it until maybe after next week. 🙏

But this issue open for contributions!

[izcream]

v-chakra work fine awesome directive

Thanks 💚

[callumflack]

Good luck with your thesis, @codebender828!

[codebender828]

Thank you @callumflack !

[codebender828]

Hey, @izcream !

I did some investigating around figuring out how to bind local assets to the CImage component.

In a nutshell, vue-loader converts relative paths like @/assets/path-to-img.jpg into require functions automatically for you at build time. Unfortunately, this is not the case when it comes to custom components from an installed component library like Chakra UI Vue.

You can circumvent this issue by using require('@/assets/path-to-img.jpg'). Below is the correct way to require relatove assets for the c-image and c-avatar components.

<!-- Incorrect -->
<c-image src="@/assets/path-to-img.jpg" />

<!-- Correct -->
<c-image :src="require('@/assets/path-to-img.jpg" />

Since this is a webpack-related problem, I will not be fixing this issue in code. I will however include some statements in the documentation for users who may encounter this problem. 🙏🏽

[codebender828]

Closed by #258