Nanoprogrammed Penultimate Musicianship

    @dataplain/repositoryimage

    0.3.0 • Public • Published

    @dataplain/repositoryimage

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

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

    Install

    npm i @dataplain/repositoryimage

    DownloadsWeekly Downloads

    4

    Version

    0.3.0

    License

    GPLv3

    Unpacked Size

    137 kB

    Total Files

    12

    Last publish

    Collaborators

    • mdauernheimer
    • pauloklaus