I am trying to develop a SPA. In this regard I am using vue.js 2 in front end and Laravel 5.5 API in back end. Now I would like to display images in front end. I wrote below code in HTML
<img :src="/images/addressObj.image"/>
Where should I put images in Laravel and how can I access that image in vue.js ?
the issue here it's that you are not using properly the :src attr, :src spects a string as value, don't let the double quotes confuse you, between the double quotes you have to place your formatted string, notice that if use :src="www.google.com/size" the img will try to find the url www.google.com/size instead www.google.com/350x150 or if you try www.google.com/{{size}} the img will try to find www.google.com/%7B%/Bsize%7D%7D (size it's a var that comes from the example below)
new Vue({
el: '#app',
data() {
return {
size: '350x150',
size2: '350x400'
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<button #click="size = '350x150'">Size 350x150</button>
<button #click="size = '350x200'">Size 350x200</button>
<!-- notice the single quotes -->
<img :src="'http://via.placeholder.com/' + size" />
<hr />
<button #click="size2 = '350x400'">Size2 350x400</button>
<button #click="size2 = '350x300'">Size2 350x300</button>
<!-- here with string interpolation -->
<img :src="`http://via.placeholder.com/${size2}`" />
</div>
Assuming that is a .vue or .js file,
<img :src="`/images/${addressObj.image}`"/>
I assume that you have correctly done the necessary stuff for the variable addressObj.
well, as u have dynamic source binding, u have to require each image.
so u just should do like that:
<img :src='require(`./images/${addressObj.image}`)'>
Related
How do you display raw code in vue?
For example I have a <Button />. Putting that in my template renders the component. What do i do if i just want to render the text as you see it <Button />? I tried double mustache ({{ <Button /> }}) and that still renders the component. Do i have to install a markdown library?
Simplest solution is to replace < and > with < and >
<template>
<div>
<pre><Button /></pre>
</div>
</template>
Another solution is to create a string in your data property and render it in your template, since it will be rendered as plain text, as per Vue's documentation:
The double mustaches interprets the data as plain text, not HTML. In
order to output real HTML, you will need to use the v-html directive
So, by doing the opposite, because you want to render the HTML as plain text, the following example will work:
<template>
<div>
{{ htmlRenderedAsText }}
</div>
</template>
<script>
export default {
data() {
return {
htmlRenderedAsText: "<Button />"
}
}
}
</script>
I'm having a problem with my project not finding the path to my png images. I know the path is correct because if I use a basic hard coded src="../assets/die1.png", it works fine. The problem is I need them to changed based on other data.
I keep getting the error: Cannot find module '../assets/die1.png'
COMPONENT:
<template>
<div class="DiceComponent col-3 bg-primary">
<img v-if="die.output != ''" :src="require(die.output)" alt="error loading image" />
</div>
</template>
NOTE: die.output == "../assets/die1.png" and this is confirmed in the Vue devtool.
EDIT: This is currently what I get when it tries to load.
For readability you can change your output variable to:
die.output == require('../assets/die1.png')
or
die.output == require('#/assets/die1.png')
And then
<template>
<div ...>
<img ... :src="die.output" ... />
</div>
</template>
I am getting some error in your store functions that I can solve now so I focused on the image question. As you are working with static files, I've moved them to public folder and have made a simple rollDice function:
rollDice() {
let rng = Math.floor(Math.random() * 6);
this.diceTemp = `./die${rng+1}.png`
},
then:
<Die :die="diceTemp" />
inside the component:
<img :src="die" />
and this works fine! Somethings to consider:
If you are using stores you can use die values inside your Die component and avoid using nested values (die.output) props (vuejs.org/v2/guide/reactivity.html)
Replace what you have now with
<template>
<div ...>
<img ... :src="require(`${die.output}`)" ... />
</div>
</template>
It was hard but I found a way
try this:
let imgName = "logo-blue.svg";
getLogo(imgName) {
const partName = imgName.split("logo-")[1];
return require("../img/logo-" + partName);
}
I don't know why, but if you do return require("../img/" + imgName); it doesn't work, just with the split it's working.
In my case, I am replacing a link on top of paragraph element using v-html
Please find the code snippet as follows
<p v-html="websiteHTML"></p>
where websiteHTML contains: <a v-bind:href="google.com/">Google</a>
The <p> tag is being rendered with Google but doesn't have hyperlink to navigate to https://www.google.com/
Could you please help in finding the error?
The HTML string you include in your variable should just be HTML, not Vue template code. When you tried including vue template directives, the framework wrote the anchor tag into the DOM with the literal attribute "v-bind:href" instead of the desired "href":
new Vue({
el: '#app',
data: {
websiteHTMLNo: '<a v-bind:href="https://google.com/">Google</a>', // <-- won't work
websiteHTMLYes: 'Google' // <-- do this instead
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-html="websiteHTMLNo"></p>
<p v-html="websiteHTMLYes"></p>
</div>
(If you actually do need to inject template code instead of plain HTML, you need to use Vue.compile instead of v-html to parse it.)
if you want to pass a var inside your link.
const url: string = 'https://google.fr/'
const html: string = `Google`
<p v-html="html"></p>
I am facing a very interesting problem. I am returning some html from server as json. My return html string look like this
str2: " <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">numan sir</router-link> </span></span>, <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">sadek mia</router-link> </span> and 4 of your firiends commented on this post"
This is returned from server. Now I want to add some spa link.
It can be nuxt link, #click event for routing or a </router-link>
I am using v-html in my front end to out put html. It does output correctly.
Is there anyways of doing this?
Thank you.
As said in the comments, it's way better to respond from your server with structured JSON data. However, you can make it work, but you need to use a <component></component>. Just using v-html won't work if you have router-link:
<div id="app">
<component :is="{template: theString}"></component>
</div>
new Vue({
el: '#app',
data: {
theString: '<h3>Something Cool</h3>'
}
})
https://jsfiddle.net/to8smxfb/
PS: You also need to make sure that theString only contains one root element. You can wrap your string into <div></div> for example.
I have created two custom VueJS components and I would like to place them adjacent to one another like so:
<div id="app">
<x-component />
<y-component />
</div>
...
new Vue({
el: '#app',
components: {
'x-component': { template: '<div>component x</div>' },
'y-component': { template: '<div>component y</div>' }
}
});
When I do this, only the first component is rendered. Is this a bug in VueJS or am I doing something wrong? It seems like this should be possible.
When I change it as follows, it works:
<div id="app">
<div>
<x-component />
</div>
<div>
<y-component />
</div>
</div>
Reproductions below:
Not working:
https://jsfiddle.net/mquqonuq/1/
Working:
https://jsfiddle.net/mquqonuq/2/
I can't remember right now if it's an html spec issue but custom web elements need to be a two tag closed system, not a self closed single element.
Try:
<div id="app">
<x-component></x-component>
<y-component></y-component>
</div>
Which works.
EDIT:
if you look at google's web components primer it lists
3. Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (<app-drawer></app-drawer>).