Im facing a problem using v-img from vuetify,
this is my code example:
{{showPreviewUrl}} <!-- showPreviewUrl = "/getimage/imageuuid" path is loaded ok -->
<!-- my problem is here, image not loaded -->>
<v-img :src="showPreviewUrl" contain></v-img>
<!-- image loaded OK -->>
<v-img src="https://picsum.photos/510/300?random" aspect-ratio="1.4" contain></v-img>
<!-- image loaded OK -->>
<img :src="showPreviewUrl">
the src is an image, it loads on an "img" tag, but not on v-img
<v-img :src="require(`#${showPreviewUrl}`)" contain></v-img>
Related
i am new about aframe and arjs, i would to show my own gltf models over an hiro path, i write this code:
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- define your gltf asset -->
<!--This is for add a text-->
<a-text value="Hello, World!"></a-text>
<a-assets>
<a-asset-item id="tree" src="models/gltf/manovella.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="##tree"></a-entity>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
when i run my code and lace an hiro marker from of the cam i just see "Hello world!" text and not my own model, i check browser console error but i don't gen anything.
Someone can help me about? Where i was wrong for load my own model?
so many thanks in advance
Try using A-Frame version 0.8.2. And as Stéphane Albanese mentioned, you have an extra # in ##tree
I'm wondering If I can setup a v-app-bar from Vuetify in the shared layout file and from the other layout send info, like for example the page title.
This is the shared layout
<template>
<v-app>
<v-navigation-drawer app permanent dark color="secondary">
//nav items in here
</v-navigation-drawer>
<v-content>
<v-container fluid>
<slot></slot>
</v-container>
</v-content>
</v-app>
</template>
The other layout file will be placed in the <slot></slot> tag, this is the other layout file where the app bar is
<template>
<v-app>
<layout>
<v-app-bar absolute fixed color="white" elevate-on-scroll>
<h2>Categories</h2>
<v-spacer></v-spacer>
<v-btn>New</v-btn>
</v-app-bar>
</layout>
</v-app>
</template>
I'm not familiar with Vuetify, I'm trying to learn so is there a way to do this? Also should I have the <v-app></v-app> in both files or only the shared layout?
Your usual setup would be that you initiate everything from your App.vue, which is basically your source file. From here on you can load all the components you need. If you use vue-router (recommended), then you can insert the <router-view /> tag to display the current content of the page you're in. That way you will always have the same content (app-bar, nav drawer) above and below (footer) the <router-view />.
You could remove the MyNavDrawer component and just put the v-navigation-drawer in there directly but I feel like most navigation-drawers take up a lot of markup and having it abstracted away in a component looks a lot cleaner.
// App.vue
<template>
<v-app>
<MyNavDrawer />
<v-content>
<v-container fluid>
<!-- If you use vue router -->
<router-view />
<!-- If you just want to display other components, add them -->
<MyOtherComponent />
</v-container>
</v-content>
<!-- Maybe add a footer here -->
<MyFooter />
</v-app>
</template>
<script>
import MyNavDrawer from "/path/to/myNavDrawer.vue";
import MyOtherComponent from "/path/to/myOtherComponent.vue";
import MyFooter from "/path/to/myFooter.vue";
export default {
components: {
MyNavDrawer,
MyOtherComponent,
MyFooter
}
}
</script>
// myNavDrawer.vue
<template>
<v-navigation-drawer app permanent dark color="secondary">
//nav items in here
</v-navigation-drawer>
</template>
I'm trying to add a picture in a blogger template.
With the HTML tag.
<img src="img_avatar.png" alt="Avatar">
But it's not loading the image.
I'm trying to put it in the direct code.
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-12 col-md-3 col-lg-3' id='sidebar'>
<b:section class='header-section' id='header-section' maxwidgets='0' showaddelement='no'>
<img src="picture goes here" alt="Avatar"/>
<b:widget id='Header1' locked='true' title='Blogs name (Cabeçalho)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>22</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
I wanna to insert the picture in this space with a different color:
But its not loading the picture...
Thanks a lot
The Blogger tag <b:section ... can only contain <b:widget ...
To insert your image upload it directly in Header widget or use an image widget.
Also, you can insert the image code within the widget tag <b:includable id='main'>
How can I display a PDF in a Laravel View like I can display a normal image?
The code I am using to implement an image is:
<div class="u-img">
<img
src="image/{{ Auth::user()->photo_jpeg }}"
alt="profile"
/>
</div>
What options/HTML-tags can I use to display a PDF?
you could use an object
<object data="/path/to/pdf.pdf" type="application/pdf">
</object>
you could use an iframe
<iframe src="http://example.com/pdf-sample.pdf" id="pdf_display_frame" width="100%" height="500px"></iframe>
I have a layout contain header include navbar and slider image.
My views folder has structure like:
+ layouts
- index.blade.php
- master.blade.php
+ posts
- list.blade.php
+ partials
- navbar.blade.php
- footer.blade.php
Note:
+ is a folder.
- is blade template file
Normally, in the master.blade.php is declare css/js file, include navbar and footer blade template.
But navbar inside a div#home, this element contains navbar and slider.
<section id="home">
#include('partials.navbar')
<!-- slider start -->
#yield('slider_images')
<!-- slider end -->
</section>
So, I can't split navbar to insert into master.blade.php. You can see master.blade.php like:
//add some js and css.
<body>
#yield('content')
#include('partials.footer')
</body>
I don't add line: #include('partials.navbar') because it include a slide.
The temporary solution is to add it into index.blade.php.
But the problem is: I have a child page, it #extends('layouts.master'). But the layout.master don't have contained partials.navbar. It only needs navbar and footer, don't need the slider.
Have any method to do this without change structure of HTML file.
You could pas a variable to the blade template:
#include('partials.navbar', ['slider' => true])
and then in the navbar you could check for that variable
#if(isset($slider) && $slider === true)
<!-- slider start -->
#yield('slider_images')
<!-- slider end -->
#endif
in that way the slider will be shown only when the slider variable is set to true