Блог

Я пытаюсь создать метод, который можно использовать внутри любого шаблона для автоматического создания URL-адресов локальных изображений.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь создать плагин, который добавляет глобальное свойство, он не работает!

Код плагина

 // src/plugins/urlbuilder.js
export default {
    install: (app) => {
        app.config.globalProperties.buildImageUrl = imageName => require('@/assets/images/'   imageName);
    }
}
 

Main.js файл

 // src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import urlbuilder from './plugins/urlbuilder.js'

createApp(App).use(router).use(urlbuilder).mount('#app')
 

Домашний вид, в котором я визуализирую изображение

 // src/views/Home.vue
<template>
    <img :src="buildImageUrl('myimage.jpg')">
</template>
 

и я получаю эту ошибку в своей консоли разработчика:

 Uncaught (in promise) TypeError: _ctx.buildImageUrl is not a function
    at Proxy.render (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Home.vue?vueamp;type=templateamp;id=fae5beceamp;scoped=true:57)
    at renderComponentRoot (runtime-core.esm-bundler.js:922)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4667)
    at ReactiveEffect.run (reactivity.esm-bundler.js:195)
    at setupRenderEffect (runtime-core.esm-bundler.js:4793)
    at mountComponent (runtime-core.esm-bundler.js:4576)
    at processComponent (runtime-core.esm-bundler.js:4534)
    at patch (runtime-core.esm-bundler.js:4138)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4744)
    at ReactiveEffect.run (reactivity.esm-bundler.js:195)
 

Примечание: Это работает, когда я добавляю чисто глобальное свойство, но я читал, что лучший способ сделать это-с помощью плагина.

Это работает, когда я делаю это:

 app = createApp(App)

app.config.globalProperties.buildImageUrl = imageName => require('@/assets/images/'   imageName)

app.use(router).mount('#app')
 

Что я делаю не так?