I follow guide here: Vue CLI - include image from assets folder in static file
So in assets folder I have img\pic.jpg. I can call that image using normal html and css:
<img src="~#/assets/img/pic.jpg">
<style scoped>
.app {
background: url(~#/assets/img/pic.jpg);
}
</style>
But for directive (correct me if the term if wrong), I tried this and of course failed. Can you help?
<img :src="'~#/assets/'+user.profilepic">
//Note: user.profilepic = "img/pic.jpg"
could you try
<img :src="require(`#/assets/${user.profilepic}`)" />
Related
I have a simple view in Vite + Vue + Sass. For styling i'm using external sass files for each component/view by using module ='classes' in the style tag and #use to use the specific scss file that should style the component/view. This doesen't trigger Vite HMR, I have to manually trigger a refresh in the browser for styles to change. HMR works just fine if I include the styles locally in the style tag, but it doesn't work with an external scss file. Here is an example:
<script setup>
import LogoNav from "#/components/navs/LogoNav.vue";
</script>
<template>
<LogoNav />
<main :class="classes.main">
<div :class="classes.loader"></div>
</main>
</template>
<style lang="scss" module="classes">
#use '#/sass/views/loading-profile';
</style>
My sass folder structure looks like this:
Where im using the global scss files like abstracts, base and utilities in main.scss:
And importing the main.scss file in main.js
Am I missing something crucial here? Have anyone encountered the same problem?
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>
I have a stencil component that I want to set a font to.
What I have now:
index.html
<body>
<sidebar-component webpagename="dashboard"></sidebar-component>
</body>
<style>
* {
margin: 0;
font-family: Lab_Grotesque_Light;
}
#font-face {
font-family: 'Lab_Grotesque_Medium';
src: url('./assets/fonts/Lab_Grotesque_Medium.otf');
font-weight: normal;
font-style: normal;
}
</style>
This sets the font when I start my component locally.
But I want to use the component in a Vue application (imported from npm). There the custom font wont work. Is there another way to implement this.
This is covered in the docs now. You can save the font to your src folder and reference it directly. https://stenciljs.com/docs/local-assets
Update: Actually it looks like there is an issue where it is not possible to load custom fonts within a Shadow DOM https://github.com/ionic-team/stencil/issues/2072
If I put the #font-face{} in the header of the index-file. It actually worked from my other applications that uses the stencil component.
In index.html
<head>
<style type="text/css" media="screen, print">
#font-face {
font-family: "LabGrotesque-light";
src: url("../assets/font/lab-grotesque-light.otf") format("opentype");
}
</style>
</head>
You have to manually define the font face in your Vue application to make this work. Just like you did in the index.html of stencil.
If you dont want to include the font assets in you vue application you can either copy the font assets with https://stenciljs.com/docs/copy-tasks or https://docs.npmjs.com/files/package.json#files to your npm package.
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>
I have been playing around with Vue Js a bit and want to create a dummy Java EE Web application using it on the front end inside of Eclipse. From what I can discern, Vue single file components are compiled into a single JavaScript file using some build engine like Webpack et alia. I don't want to do that right now. So I've tried to create JavaScript files that emulate .vue files. But for some reason, Vue directives are being stripped out of the generated HTML. Here's illustrative code:
/** vuetest.js
* Javascript file that emulates a .vue file, to facilitate easy prototyping within an
* Eclipse Dynamic Web Application without having to compile single file Vue components
* outside of the IDE.
*/
var appTemplate = `
<div style="width:100%">
<div class="div-style"><a v-on:click ="alert('Working...');">Test</a></div>
<div class="div-style-two"><a onclick ="alert('Working...');">Test 2</a></div>
</div>
`;
var style = `<style type='text/css'>
.div-style {
float:left;
width: 50%;
background-color: orange;
}
.div-style-two {
float:right;
width: 50%;
background-color: blue;
}
</style>`;
$(style).appendTo("head");
Vue.component('app-content', {
template: appTemplate
});
var app = new Vue({
el: '#app'
});
And:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vue Directives Test</title>
<script src="lib/vue.js"></script>
<script src="lib/jquery-3.3.1.js"></script>
</head>
<body>
<div id="app">
<app-content></app-content>
</div>
<script src="js/vuetest.js"></script>
</body>
</html>
All works fine except the v-on directive; it is stripped out of the compiled template. What am I missing?
Thanks in advance for the help!
Why the v-on is not there
The v-on directive; it is stripped out of the compiled template. What am I missing?
Vue.js removes all directive attributes after compiling them, so you rendered markup is clean and tidy. (source)
So, the v-on is just not in the HTML, but it was taken into account.
Making it work
In your case, you will also get an error like:
VM5894 vue.js:584 [Vue warn]: Property or method "alert" is not
defined on the instance but referenced during render. Make sure that
this property is reactive, either in the data option, or for
class-based components, by initializing the property. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <AppContent>
<Root>
VM5906:2 Uncaught TypeError: alert is not a function
This happens because Vue will expect the alert to be a method on the component. Try adding methods: { alert: alert.bind(window) } to your component declaration:
Vue.component('app-content', {
template: appTemplate,
methods: { alert: alert.bind(window) }
});
The code above will make the component's alert() method be the window.alert() method.
Check here a plunker demo of this code.