when i open the project in https mode, cant retrieve the images(receive 404 ).
Can someone help me?
Code:
<template>
<div>
<img src="/assets/photos/test.png"/>
</div>
</template>
<script>
export default {
name: "home"
}
</script>
v-bind src and require your photos
<img :src="require('/assets/photos/test.png')"
Related
I need to have a custom layout or remove default layout for my signIn page. Based on Nuxt3 docs you can set layout with definePageMeta({layout: "custom"}) or remove definePageMeta({layout: false}) however when I set it to false or "custom" I get a TypeError.
The definePageMeta does change the layout. However, there are instances where when you first load the signIn page it doesn't show anything and shows the TypeError above. Any advice on how to solve this issue is greatly appreciated!
Btw, I just recently started using nuxt3, never had this issue in nuxt2.
// sign in page
<template>
<div>
<NuxtLayout name="custom">
<v-row>Sign In Page</v-row>
</NuxtLayout>
</div>
</template>
<script lang="ts" setup>
definePageMeta({
layout: 'custom',
})
</script>
// layout custom.vue
<template>
<v-app>
<v-main>
<v-container fluid>
<slot />
</v-container>
</v-main>
</v-app>
</template>
To create layout in nuxt 3 you must add slot.
// custom layout
<template>
<div class="custom-layout">
<slot/>
</div>
</template>
and then in your page component add layout: 'custom' in definePageMeta in setup script.
<template>
// YOUR PAGE
</template>
<script setup lang="ts">
definePageMeta({
layout: "custom",
});
</script>
if you need app.vue you must add NuxtLayout to it
// app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
I try to load different pictures dynamically. But it won't work yet.
In template i have my img tag with the dynamic source-path:
<template>
<div id="test">
<img src="require('../../assets/containermoduls/${pname}.png')" />
</div>
</template>
here my data function:
<script>
export default {
data () {
return {
pname: '2x5'
}
}
}
</script>
This is my folder structure:
-src
--assets
---containermoduls
----2x4.png
--components
---p3component
----Page3Left.vue (where my code is from)
Does anybody know what I'm doing wrong? I don't get any error messages on my console. Instead of a picture I see someting like an picture icon.
You should use binding :src instead of src
<img :src="require('../../assets/containermoduls/${pname}.png')" />
I am fairly new to Vue and currently am working on the first project with it.
I have encountered this problem which I cannot seem to find a solution for, I have "AuthPage.vue" component which has a slot for the message and default slot for content, once I put custom componen in my login.blade.php it should be prefilled in that slot but it says that custom element does not exist. If I replace slot inside .vue file with custom element it seems to be working perfectly. I am not sure what I am doing wrong.
AuthPage.vue
<template>
<div>
<div class="page-brand-info"></div>
<div class="page-login-main">
<img class="brand-img" src="/assets/global/images/logo.jpg">
<h3 class="font-size-24 text-center"><slot name="title"></slot></h3>
<slot name="message"></slot>
<slot></slot>
<footer class="page-copyright">
<p>© {{ moment().year() }}. All RIGHT RESERVED.</p>
</footer>
</div>
</div>
</template>
<script>
import LoginForm from './LoginForm.vue';
import ResetPasswordForm from './ResetPasswordForm.vue';
export default {
components: { LoginForm, ResetPasswordForm }
}
</script>
login.blade.php
#extends('backoffice.layout.auth')
#section('content')
<auth-page>
<template v-slot:title>Sign In</template>
<login-form></login-form>
</auth-page>
#endsection
Thank you for your help!
Eddie
You'll need to register the LoginForm component globally in order for it to be passed into the AuthPage component as a slot (when passed in directly from a view). This is because, outside the scope of your component, Vue doesn't know what <login-form> is.
Since you're using laravel, in your resources/js/app.js file add the following:
import LoginForm from './path/to/LoginForm.vue';
Vue.component('login-form', LoginForm);
Component Vue:
<template>
<img src="../../images/logo-icon.svg">
Path: /resources/js/components/header.vue
Images:
Path: /resources/assets/images/logo-icon.svg
Log error:
enter image description here
https://v2.vuejs.org/v2/guide/syntax.html#Attributes
<template>
<img :src="../../images/logo-icon.svg">
or
<template>
<img v-bind:src="../../images/logo-icon.svg">
I'm creating a simple web app that takes a JSON file which holds an url of 6 images stored inside my folder.
Here is the file: https://api.myjson.com/bins/t3ri9 and I want it using vue js's vue-bind:src to attach each url of each image so that they may be displayed on the browser. Here is the code:
<template>
<div id="main">
<br/><br/>
<h2>Here is a list of all your image</h2>
<br><br>
<div id="images">
<div class="image" v-for="image in pod">
<img v-bind:src="image.url"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: "wall",
data() {
pod: []
},
created() {
this.$http.get('https://api.myjson.com/bins/t3ri9').then(function (data) {
this.pod=data.body;
console.log(this.pod);
});
}
}
</script>
<style scoped>
</style>
However when I run the project on a localhost it doesn't display the images even though when I do to the console it correctly passed the image's url.
this inside the callback is not the same this as outside (in created() {).
Use fat-arrow function to preserve this from the outside:
this.$http.get('https://api.myjson.com/bins/t3ri9').then((data) => {
this.pod=data.body;
console.log(this.pod);
});
Try this
v-bind:src="require('image.url')"
I'm guessing your local images aren't added by webpack?
Maybe try and use the remote location of the image instead.
http://...