'Display Image From Database To Browser With Vue.js
<!-- SLIDER -->
<div id="slider">
<div class="tp-banner-container">
<div class="tp-banner">
<ul>
<li v-for="s in sliderData" data-transition="zoomout" data-masterspeed="1500">
<img v-bind:src="{{s.image}}" alt="" />
<div class="tp-caption impulse_big lfb fadeout"
data-x="20"
data-y="110"
data-speed="500"
data-start="900">
<a><span class="impulse_big_blck">{{s.imageHeader}}</span></a>
</div>
<div class="tp-caption impulse_small lfl fadeout"
data-x="20"
data-y="200"
data-speed="500"
data-start="1500">
<a class="impulse_big_blckK">"test"</a>
</div>
</li>
</ul>
</div>
</div>
</div>
I can't display the images in the database on the screen with vue.js.I am using ms sql for database.Browser gives this error in debug section.
vue.js:634 [Vue warn]: Error compiling template:
invalid expression: Unexpected token '{' in
{{s.image}}
Raw expression: v-bind:src="{{s.image}}"
4 | <ul>
5 | <li v-for="s in sliderData" data-transition="zoomout" data-masterspeed="1500">
6 | <img v-bind:src="{{s.image}}" alt="">
| ^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 |
(found in <Root>)
What should be the correct usage for this line of code ?
<img v-bind:src="{{s.image}}" alt="" />
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|