Loading Images in Components #60

jon-lipstate · 2021-04-27T23:15:37Z

jon-lipstate
Apr 27, 2021

i am getting an error from createVue3SFCModule.ts:305.
Uncaught (in promise) TypeError: Unable to handle .png files (images/logo.png)

Is there a workaround to bringing images in?

in the component:
[img src="../images/logo.png"] (replace [] with angles)
also tried:
import logo from "../images/logo.png";

the following is the config:

const options = {
  moduleCache: {
    vue: Vue,
  },
  async getFile(url) {
    const res = await fetch(url);
    if (!res.ok)
      throw Object.assign(new Error(url + " " + res.statusText), { res });
    return await res.text();
  },
  addStyle(textContent) {
    const style = Object.assign(document.createElement("style"), {
      textContent,
    });
    const ref = document.head.getElementsByTagName("style")[0] || null;
    document.head.insertBefore(style, ref);
  },
};
const { loadModule } = window["vue3-sfc-loader"];
const app = Vue.createApp({
  components: {
    vLayout: Vue.defineAsyncComponent(() =>
      loadModule("components/vLayout.vue", options)
    ),
  },
  template: "<vLayout></vLayout>",
});
app.mount("#app");

edit: using vs-code and live-server. i saw one github issue with live-serve sending incorrect mime types, so can't be certain it is sfc-loader.

Answered by FranckFreiburger

May 6, 2021

I need to add binary data support. Work in progress ...

View full answer

FranckFreiburger · 2021-05-06T19:09:37Z

FranckFreiburger
May 6, 2021
Maintainer

I need to add binary data support. Work in progress ...

1 reply

FranckFreiburger May 15, 2021
Maintainer

see #69

puredriver · 2022-01-07T08:45:04Z

puredriver
Jan 7, 2022

Hi everyone,
still have problems with PNG files in the vue component - can somebody help me? :-) Thx in advance
Uncaught (in promise) TypeError: Unable to handle .png files (public/assets/img/gallery/student-feedback.png)

here's my code

extract of index.html

<!DOCTYPE html>
<html class="h-100">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue3-sfc-loader.min.js"></script>
...
</head>
<body>
....
<div id="app"></app>
....
<script>

const { loadModule } = window['vue3-sfc-loader'];

      const options = {
        moduleCache: {
          vue: Vue
        },
        async getFile(url) {
          
          const res = await fetch(url);
          if ( !res.ok )
            throw Object.assign(new Error(res.statusText + ' ' + url), { res });
          return {
            getContentData: (asBinary) => asBinary ? res.arrayBuffer() : res.text(),
          }
        },
        addStyle(textContent) {
  
          const style = Object.assign(document.createElement('style'), { textContent });
          const ref = document.head.getElementsByTagName('style')[0] || null;
          document.head.insertBefore(style, ref);
        }
      }
      const Club = Vue.defineAsyncComponent( () => loadModule('./Club.vue', options) )

     .... some vue-router stuff here ....

     const app = Vue.createApp({ });
      
      app.mount('#app');

</script>
</body>

Club.vue

<template>
     <img class="w-100" src="./public/assets/img/gallery/student-feedback.png" alt="..." /> 
</template>

<script>
    export default {

    }
</script>

1 reply

ciddim Jan 6, 2024

2 years later, same thing, see my comment bellow.

ciddim · 2024-01-06T03:07:12Z

ciddim
Jan 6, 2024

I don't know if any of this is still maintained, but as of Jan 5th 2024, that bug is still present, or the solution is still NOT clear from the circling "See #69"=>"See #60".

So i'll write my easy work around the problem :

I have a logo component :

Logo.vue

<template>
     <img class="w-100" :src="srcLogo" alt="Logo" /> 
</template>

<script>
    data() {
    return {
      srcLogo: undefined,
    };
  },
  methods: {
    changeSource: function () {
      this.srcLogo = "./public/assets/img/gallery/logo.png";
    },
  },
  mounted() {
    this.changeSource();
    console.log('Vue logo mounted');
  }
</script>

Basically changes the img src once the tag has been created in the dom, so vue-sfc-loader doesn't think it's loading a file (I think, idc, it works without error messages now)

edit: formatting

0 replies

FranckFreiburger · 2024-01-08T19:31:16Z

FranckFreiburger
Jan 8, 2024
Maintainer

I've just added an example of image loading:
https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/examples.md#image-loading

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loading Images in Components #60

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Loading Images in Components #60

jon-lipstate Apr 27, 2021

Replies: 4 comments · 2 replies

FranckFreiburger May 6, 2021 Maintainer

FranckFreiburger May 15, 2021 Maintainer

puredriver Jan 7, 2022

extract of index.html

Club.vue

ciddim Jan 6, 2024

ciddim Jan 6, 2024

FranckFreiburger Jan 8, 2024 Maintainer

jon-lipstate
Apr 27, 2021

Replies: 4 comments 2 replies

FranckFreiburger
May 6, 2021
Maintainer

FranckFreiburger May 15, 2021
Maintainer

puredriver
Jan 7, 2022

ciddim
Jan 6, 2024

FranckFreiburger
Jan 8, 2024
Maintainer