@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" />