@dataplain/repositoryimage

Vue component to display an image from a pre configured repository.

• Report bugs: https://github.com/dataplain/repositoryimage/issues

Install

Create a new vue project:

vue create

Install component:

npm install --save @dataplain/repositoryimage

Environment setting

Make a src/resources folder at the root:

mkdir src/resources

Configure the repositoryimage.js

Create the src/resources/repositoryimage.js:

import Vue from "vue";
import RepositoryImage from "@dataplain/repositoryimage";

Vue.use(RepositoryImage, { RepositoryImageName: "MyRepositoryImage", Path: process.env.VUE_APP_YOUR_CONFIG_PATH });

Import repositoryimage.js

The "src/main.js" file should look like this:

import Vue from "vue";
import App from "./App.vue";

import "./resources/repositoryimage";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount("#app");

Set .env file

VUE_APP_YOUR_CONFIG_PATH=https://my-repository.example.com/images

How to use (example in App.vue)

<template>
    <div>
        <my-repository-imagem src="my-image.jpg" />
        <my-repository-imagem src="another-image.jpg" fluid rounded @click="showAlert" />
    </div>
</template>

<script>
export default {
    methods: {
        showAlert() {
            alert("Image has clicked!");
        }
    }
}
</script>

Properties

Property	Description	Required	Default
src	Image src	yes
height	image height	no	null
width	image width	no	null
title	image title	no	null
alt	alternative text	no	null
fluid	auto scale size	no	false
rounded	rounded corners	no	false

Events

Event	Description
click	Returns the clicked object

Using in the browser

To use directly in the browser, import @dataplain/repositoryimage:

<script src="https://unpkg.com/@dataplain/repositoryimage" />