How do I load image from my "Elements component"

Ask us anything
1

Hi there,

I created an empty Elements component, but I want to load an intern image that is coming from this package.
But in the “Dev editor”, it show the error “missing image” icon file.

<template>
<div>
<img class="photo" src="/assets/image.svg">
</div>
</template>

Do I need to add any other code or package.json?

Kind Regards,
Stefan

2

My understanding is that @weweb/cli uses webpack(v.4) to bundle your component and is using url-loader for handling image files imported in your component script, and vue-loader for images URL in the template. In both cases the image is returned as data URL.

Example:

<template>
    <!-- this works -->
    <img src="./other-image.png" alt="other funny image" />
    <!-- but also this works -->
    <img :src="image" alt="funny image" />
</template>

<script>
import image from './path-to-image.svg';

export default {
    props: {
        content: { type: Object, required: true },
    },
    setup(props) {
        return { image };
    },
};
</script>

Absolute paths are not transformed. Relative paths are resolved based on the structure of your folder.

Check the correct path of the image. You probably want to use a relative path.

1 Like
3

Hi there,

Thank you!
That works well.

Kind Regards,
Stefan

1 Like