i am trying to render an image with the v-html directive, my images are stored in a folder this way
And there is my code:
<template lang="html">
<b-container fluid>
<b-row>
<b-col cols="2" offset="5" v-html="renderCorps">
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
methods: {
renderCorps(item){
var link = '"../../assets/images/activite-red.png"';
return "<img src= "+link+">";
}
}
}
</script>
it seems that something's going wrong with the path and i can't got it, any help please?
Webpack would not reference to dynamic image links, not inlined into href of image.
Use this plugin to copy images to public folder
Related
I am trying to load an svg but want my own vue click events.
I am using vue-svg-loader but can only use the onclick inside the svg
<a>
<rect id="test" x="149.69" y="30.732" width="47.585" height="38.663" fill="#01ff00" onclick='console.log("Hello")' />
</a>
I want to be able to use my own methods inside my file.vue
When I copy and paste the entire svg into my vue file without using vue-svg-loader then it works fine where I can use my own methods, however it takes ages each time to compile.
Is there a way to use my own methods a bit like so whilst using vue-svg-loader:
methods: {
CheckOut() {
console.log("item Clicked")
alert("Item Clicked")
},
}
my template looks like so:
<template>
<div class="about">
<br /><br /><br /><br />
<v-row class="text-center">
<v-col class="mb-4">
<h1>This is an about page</h1>
<PlanType class="logo" />
</v-col>
</v-row>
</div>
</template>
and script a bit like so:
<script>
import PlanType from '../../public/PlanTypeA-1.svg';
export default {
name: "About",
components: {
PlanType
},
I've been trying to pass a prop to a component, which is a URL to an image for Section component to update v-bind:src of dom img tag, but somehow the image does not show up.
I can't see what's wrong.
File: App.vue
<template>
<div id="app">
<Section img="../assets/linux.png" />
</div>
</template>
<script>
import Section from "./components/Section.vue";
export default {
name: "app",
components: {
Section
}
};
</script>
File: Section.vue
<template>
<div>
<img :src="img" />
</div>
</template>
<script>
export default {
props: {
img: String
}
};
</script>
I suspect that the issue is due to the relative path you are using. I assume that ../assets/linux.png resolves to the right image URL with respect to App.vue, but it actually needs to resolve to the right image with respect to your <Section> component.
Based on what I can tell from the code you've shared, It seems like you can solve this by updating App.vue as follows:
<template>
<div id="app">
<Section img="../../assets/linux.png" />
</div>
</template>
...
I should, however, point out that you are getting absolutely no benefit from passing the image source as a prop like this. Since it is not bound to a reactive data property in App.vue, you may as well just omit that prop altogether.
Can't get a simple image file to load using Vue (using a single-file component with a .vue extension). Here's the code, which I put inside template:
<div><img :src="london.jpg"></div>
What am I doing wrong?
I'm used to put all images into the public folder, so I don't need webpack to load images.
The path of the image is '/public/assets/img/london.jpg'
So, in any Vue component I can render the image using
<div>
<a href="#">
<img src="/assets/img/london.jpg" alt="london"/>
</a>
</div>
You can also directly require in your template.
<div>
<a href="#">
<img :src="require(`#/assets/img/london.jpg`)"/>
</a>
</div>
Note that the # is your src/ folder.
When binding properties, the model or data type must be correct.
To bind :src, it must be a string or data model.
<div> <img :src="'london.jpg'"></div>
or
<div> <img src="img"></div>
or
export default {
data () {
return {
img: require('london.jpg')
}
}
}
<div> <img :src="img"></div>
What I'm trying to do is seemingly simple, but I can't seem to figure it out. Basically, I have 2 files:
A PHP file with the following:
...
<user-panel v-if="user.id && loaded" v-bind:user="user" v-bind:name="theUserName"></user-panel>
...
A .Vue component file with the following (that gets compiled into another file):
<template>
<span id="userPanel" class="d-flex align-items-center">
<a href="#" role="button" class="user-dropdown-toggle">
<div class="logged-in d-flex align-items-center">
<span class="d-flex align-items-center justify-contnet-center"></span>
{{name}}
</div>
</a>
</span>
</template>
<script>
export default {
name: "UserPanel",
props: ['user'],
created () {
console.log(this.$refs.myTestField.value)
}
}
</script>
All I'd like to do is pass data from the PHP to Vue into {{name}}. I've tried v-bind, a data-attribute, a hidden input, etc. Any help would be greatly appreciated.
My intention is to transfer data from my .php file to the .js file where the VUE code resides. Here I show you my code. In the proposed example I would like to import a simple string, subsequently I would like to import a JSON. Thank you so much.
File PHP
<div id='app'> <App v-bind:import='Value Import'> C'è QUALCHE PROBLEMA </App> </div>"
File .js
var App = Vue.component("App", {
template: `
<div class="container">
<div>
<h2>{{ titolo }}</h2>
<h3>{{ import }}</h3>
</div>
</div>
`,
props: ['import'],
data() {
return {
color: "color: red",
titolo: "Inizio Container",
};
}
});
new Vue({
el: "#app",
});
Quanto sopra purtroppo non funziona.
Vue single file components are processed on client side.
There are SSR, however, since you have php on your server, you must set up a REST service so you can use fetch or axios to consume server data and present it to the client side.
Let's say you have a php variable that contains string. $phpString
PHP file
...
<my-component v-bind:myProperty="<?php echo $phpString ?>"></my-component>
...
Don't forget to escape $phpString before echoing it.
In your Vue define a property called myProperty:
<template>
<span>
{{ myProperty }}
</span>
</template>
<script>
export default {
props: ['myProperty']
}
</script>
In my project, I have to display a series of images, and I have stored their paths in a configuration object ìmg`:
data() {
return {
el: "#about",
img: {
'buy': '../assets/buy.svg',
}
}
}
I am using Bootstrap-Vue components in my template, and I try to create a b-card for each image.
My problem is, that if I pass the path directly to the img-srcproperty, it is displayed. However, if I try to read it from my img object, the image is not displayed.
Any hints of how to resolve this?
The following template code snippet illustrates the problem:
<div id="lifecycle">
<!-- prints correct path -->
<p>{{img['buy']}}</p>
<!-- shows the picture -->
<b-card :title="img['buy']"
img-src="../assets/buy.svg">
</b-card>
<!-- can not display the picture :( -->
<b-card :title="img['buy']"
:img-src="img['buy']">
</b-card>
</div>
When I inspect the DOM, I can see that in the case where the image path is a string literal, it is resolved into /static/img/buy.62e6a38.svg, while when I pass in an expression, it is the non-resolved path, that is passed to the component, ../assets/buy.svg:
<div class="card">
<img src="/static/img/buy.62e6a38.svg" class="card-img">
<div class="card-body">
<h4 class="card-title">../assets/buy.svg</h4>
</div>
</div>
<div class="card">
<img src="../assets/buy.svg" class="card-img">
<div class="card-body">
<h4 class="card-title">../assets/buy.svg</h4>
</div>
</div>
Is this some kind of loader issue?
Any ideas for, what I am doing wrong here?
When you use img path directly in template it will be correctly resolved with vue-loader to require("path/to/image.png"), also it translates your asset path to something production related to make it work correctly after build.
If you want to bind path property from code you should help loader to resolve path with require or import:
import buy from "../assets/buy.svg"
//... in component
data() {
return {
el: "#about",
img: {
buy
}
}
}
Or with require:
data() {
return {
el: "#about",
img: {
buy: require('../assets/buy.svg')
}
}
}
Related source: Vue CLI 3 Docs