I want to add a background image in my App.vue file in my Vue project.
I tried this with a file titled 'leaves.jpg' in my assets folder but the result is blank.
<template>
<div :style="{'background-image':'url(./assets/leaves.jpg)'}">
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
</style>
Try to add height and width to div.
<div :style="{'background-image':'url(./assets/leaves.jpg)'}"
style="width=100px; height="100px"
/>
assuming your path to asset folder is correct
You need to require it:
:style="{'background-image': `url(${require('#/assets/leaves.jpg')})`}"
Try to add the background image in style tag as below.
<style>
div {
background-image: url('custom1.png')
}
</style>
Related
I have page with background-color animated. I'm trying to navigate to another page using NuxtLink, but it doesn't render another page until css animation on the current page finishes. Is there a way for a NuxtLink to ignore animations?
Page with animation
<template>
<div class="animated">
<h1>MAIN</h1>
</div>
</template>
<script>
export default {
name: "IndexPage",
};
</script>
<style scoped>
.animated {
background-color: rgba(0, 0, 0, 1);
animation-duration: 5s;
animation-fill-mode: forwards;
animation-name: anim;
}
#keyframes anim {
from {
background-color: black;
}
to {
background-color: red;
}
}
</style>
Layout with NuxtLinks
<template>
<div>
<nav>
<NuxtLink to="/">Main</NuxtLink>
<NuxtLink to="/foo">Foo</NuxtLink>
<NuxtLink to="/bar">Bar</NuxtLink>
</nav>
<Nuxt />
</div>
</template>
Another page without animation
<template>
<h1>FOO</h1>
</template>
When I try to navigate from Main to Foo page, it transitions only after animation in main finishes. I would like it to transition to another page regardless of css.
Example: https://codesandbox.io/s/heuristic-kate-k4t77r
I got it working by wrapping the animated page inside a div. It might be colliding with nuxt transitions, I'm not sure but now it works.
<template>
<div>
<div class="animated">
<h1>MAIN</h1>
</div>
</div>
</template>
I have this simple page, designed with Vue and Tailwind:
App.vue:
<template>
<!-- <div class="bg-blue-500 flex flex-col h-screen min-h-screen " id="app">-->
<div id = "app" class = "bg-blue-500 flex flex-col h-screen min-h-screen app">
<Header/>
<main id ="app-main">
<p>app</p>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</main>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header, Footer
}
}
</script>
<style>
#app {
}
#app-main {
display: flex;
flex: 1 1 0%;
}
</style>
However if I edit #app style:
#app {
background-color: purple;
}
So as can be seen, when Tailwind is used, the styling behaves as expected: everything outside header and footer is blue, header and footer - their respective colors. However an attempt to set a color in the <style> tag, results in #app's background color overriding those of header and footer.
How do I fix it? How do people deal with it, when they don't use Tailwind?
If I understood you correctly, you are trying to change the color of the blue app region.
Notice the class bg-blue-500 on #app element? That's the class controlling the element's background color.
I can't check it but I bet renaming it to bh-purple-500 will color the background purple. You can find more default colors in the docs.
They way you're doing it overrides the styles of the child elements.
I'm building web app with Ant Design Vue.
I would like to know how to remove bottom-width in the header of <a-modal>.
This is the screenshot of what I would like to.
This is my code.
<template>
<a-modal width="1000px" title="demo">
Hi, Modal
</a-modal>
</template>
<script>
:
</script>
<style lang="less" scoped>
.ant-modal-header {
border-bottom-width: 0;
}
</style>
I know the class ant-modal-header defines border-bottom-width in Chrome Developer Tool.
So I defined new ant-modal-header in <style lang="less" scoped> to overwrite design, but somehow, it doesn't work.
You can use wrapClassName prop to give class to this specific modal container, and once you give class name to container you can target it but scoped style won't work here because classes are assigned in your current component
so something like this should work.
<template>
<a-modal width="1000px" wrap-class-name="my-special-modal" title="demo">
Hi, Modal
</a-modal>
</template>
<script>
:
</script>
<style lang="less">
.my-special-modal {
.ant-modal-header {
border-bottom-width: 0;
}
}
</style>
This should work:
.ant-modal-header {
border-top: 0 none;
}
So I have this Component code
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("HOW to include the image here?");
}
</style>
How can I include the image in that style section code?
My component is in a directory
src/component/sample-comp/MyComponent.vue
My images are in a directory
assets/images
I already tried using #/assets/images/sample-image.png It wont include the image. It is giving an error below
ERROR Failed to compile with 1 errors 08:53:42
This relative module was not found:
* ./#/assets/images/cta-bg.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18a303e8","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/frontend/landing-layouts/CallToAction.vue
You cannot use the # alias as Webpack cannot understand this alias inside the <style></style> tags.
There are two options to do this.
First option:
Since # is mapped as src/ in Webpack, using your component, your path should be background-image: url('../../assets/images/cta-bg.png') in the <style></style> tags.
Second option:
You can use the style binding directly in the <div> tag.
<div :style="backgroundImage: `url(${require(`#/assets/images/cta-bg.png`)})`">
<p>Test</p>
</div>
just update the background URL form
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("HOW to include the image here?");
}
</style>
To
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("~#/assets/images/sidebar.svg");
}
</style>
Iam trying to download the custom element after it is being updated with edit option
https://codepen.io/nagasai/pen/PKNeMw
In the above example, I am able download file with x-foo custom element but when I edit the value of it and try to download , I can see only DOM content and without shadow DOM
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
</head>
<body>
<div id="Preview">
<x-foo></x-foo>
</div>
<dom-module id="x-foo">
<template>
<style>
.actionIcons {
position: absolute;
top: 0;
right: 0;
opacity: 0;
background: grey;
}
div.actionIcons iron-icon {
padding: 7px;
}
div.actionIcons iron-icon:hover {
background: lightblue;
}
.actionIcons:hover {
opacity: 1;
}
</style>
Hover Top Right hand hover to edit
<div class="actionIcons">
<iron-icon icon="icons:create" on-click="toggle"></iron-
icon>
<iron-icon icon="icons:content-copy"></iron-icon>
<iron-icon icon="icons:close" onclick="deleteElem(event)">
</iron-icon>
</div>
[[text]]
<paper-input value="{{text::input}}"></paper-input>
<iron-collapse id="collapse">
Enter field name: <paper-input type="text" value="
{{text::input}}" autofocus></paper-input>
</iron-collapse>
</template>
</dom-module>
<button onclick="downloadHtml()"><a id="downloadHtmlElem"
download>Download HTML</a></button>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
}
customElements.define(XFoo.is, XFoo);
let downloadHtml = () =>{
let a = document.getElementById('downloadHtmlElem')
a.download = "index.html";
a.href = "data:text/text," + document.getElementById("Preview").innerHTML;
}
DOM under the shadow Root, or the shadow DOM, can not be accessed via innerHTML. It is not supposed to be. Just the way it is designed to work.
Unless you are designing your custom element and expose the DOM via Slots.
Or, the published element exposes its DOM somehow.
You could possibly try hacky ways like the one mentioned here
But a direct innerHTML on the parent DIV wouldn't get you what you want.
Also, Leaving the same answer at Your exact same query with references to earlier Stack Overflow discussions on piercing the Shadow DOM