can anyone help me, why my image won't load ?
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="'../src/assets/image/kimi-no-na-wa-poster.jpg'+movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
This is my dir
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
your path of an image can be added to movie.poster
so your movie.poster will contain value '../src/assets/image/kimi-no-na-wa-poster.jpg'
you can add image tag in the following way also
<img :src="'../src/assets/image/'+ ${movie.poster}" class="card-img-top" :alt="movie.name"/>
In this case, your variable movie.poster will container only the name of image kimi-no-na-wa-poster.jpg
Related
I'm doing project with Spring Boot+Spring Data+Spring MVC.I want to show image from database to thymeleaf but image not displayed. This is my code
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a href="single.html" class="compare-in"><img th:src="#{/static/images/${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><tr th:text="${room.name}"></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
I save image with name image in database and i save image in folder ../static/images .. When I copy images name in database instead of ${room.image} , image will display..I don't know why
I've got the same issue, I get the issue resolved by doing this :--
<th:style="'background-image:url('+ ${room.image}+');'"></div>
Hope it helps.
I'm having a problem scaling a png image with a transparent background with a width of 279 pixels and height of 432 pixels with class img-responsive on bootstrap3.
The Problem:
Whenever, I upload the png image inside the img tag with the class=
"img-fluid" it remains the same size as I scale. Other images seems to
work fine, but if I try to upload a bigger image it will become
responsive but only scale from very large to normal size, not from
normal to small.
My question is
What is the best way to optimize a PNG image for Bootstrap-3 with the class img-responsive?
HTML:
<div class="poster">
<div class="container">
<div class="intro-text">
<div class="intro-heading">Welcome <img href="../html/indexfinal.html" class="bigv" src="../images/logos/bigvlogo.png" alt=""/> <img href="../html/indexfinal.html" class="midv" src="../images/logos/midvlogo.png" alt=""/> </div>
<div class="intro-lead-in">Hi yall'</div>
<div class="container-fluid">
<img class="mascot" src="../images/mascot/wave.png">
</div>
<a style="float:left" id="guestsignup"></a>
</div>
</div>
</div>
It will work.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" class="img-responsive" alt="Cinque Terre">
</div>
</div>
</div>
Resize the screen to see the difference.
You can add img-responsive class to existing code:
<img class="mascot img-responsive" src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg">
Hope that is what you are looking for.
So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width
<ion-side-menu side="left">
<ion-content>
<div class="list card">
<a menu-close href="#/app/account" class="item item-avatar">
<img src="{{user.detail.avatarUrl}}" on-error-src="img/avatar.jpg">
<h2>{{user.detail.nickname}}</h2>
<p>{{user.attributes.username}}</p>
</a>
</div>
<ion-list>
<ion-item menu-close href="#/login">
登陆
</ion-item>
</ion-list>
<div class="card">
<div class="item item-image">
<img alt="个人信息" src="img/wudics.jpg">
</div>
<div class="item item-image">
<p>扫描二维码下载APP版</p>
</div>
</div>
</ion-content>
I have set the alt tag inside img tag, but this is not working. I want to implement that it can show a tip when my mouse hover on the image.
how to do that? please help.
From what I know alt tag was not intended to be used in this way being alternative text if the image can not be displayed or if read using text to speech software for blind people.
Try the title attribute for additional information about the image.
example title="your text"
Not sure why it's not displaying though.
I have images placed in my website using the < img> tag. When the website is scaled to a smaller screen the images hang over the container. Why are they not scaling with the the rest of the site? Any fixes?
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="img/WDadd.png" alt="" />
</div>
</div>
</div>
I dont know if this is the right way to do it, but it seems to be working for me you could try to add, give it the class thumbnail on the image, and if you dont like the look of thumbnail you can always edit it in your css file
example: http://jsfiddle.net/abnH6/6/
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="http://lorempixel.com/500/500/" alt="" class="thumbnail"/>
</div>
</div>
</div>