I use spring mvc and JPA in my project. I get file as byte[] and save in Database. but when I want to display in <img tag of html it don't display.
my entity is:
class Photo {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String title;
#Lob
private byte[] profilePic;
// getter and setter
}
value in Database is:
but my server response is:
{
"id": 4,
"title": "pic 1",
"profilePic": "ZGF0YTppb...VFtQ0M=",
}
and display in html:
<img src='ZGF0YTppb...VFtQ0M=' />
//or
<img src='data:image/jpeg;base64,ZGF0YTppb...VFtQ0M=' />
What to do to display the photo?
thanks
Assuming it's base64 encoded:
<img src='data:image/jpeg;base64,ZGF0YTppb...VFtQ0M=' />
Basically you can use data urls with this format depending on what content [type] you want to display:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
HTML:
<img id="profileImg" src="">
JS:
document.getElementById("profileImg").src = "data:image/png;base64," + profilePic;
This assumes that your image is stored in PNG format (and base64 encoded). For other image format (JPEG, etc.), you need to change the MIME type ("image/..." part) in the URL.
I am trying to implement text formatting on a string called name.Once the string is entered into the html form,upon click of a save button, the new string format should be rendered below the form.
The string should either be changed to uppercase or lowercase depending on string length.
If string length is even,the string should be changed to uppercase, if string length is odd,string should be changed to lowercase.
I have put the logic for changing the text case inside the 'formatFactory' factory.The format method inside the 'formatFactory' is responsible for changing text case.
formattingFactory.js
app.factory('formatFactory', function(){
var formattingFactoryObject = {};
formattingFactoryObject.format = function(name) {
if(name.length % 2 == 0) {
name.toUpperCase();
}else{
name.toLowerCase();
}
}
});
I have the following service that is responsible for saving session data i.e name and nickname strings
sessionService.js
angular.module('app').service('sessionService',[
'$window',
//the $window object provides angular access to the browser's window object
sessionService
]);
function sessionService($window) {
this.save = save;
this.get = get;
this.clear = clear;
function save(key, value) {
$window.sessionStorage.setItem(key, value);
}
function get(key, value) {
return $window.sessionStorage.getItem(key);
}
The following is my controller.I have called the method for changing string case right before the method for saving session data inside vm.setServiceSession method
sessionController.js
angular.module('app').controller('sessionController',[
'sessionService','formatFactory',
function sessionController(sessionService) {
var vm = this;
vm.getServiceSession = function() {
vm.model = {
name: sessionService.get('name'),
nickname: sessionService.get('nickname'),
status: 'Retrieved by service on ' + new Date()
};
}
vm.setServiceSession = function() {
formattingFactoryObject.format(name);
sessionService.save('name', vm.model.name);
sessionService.save('nickname', vm.model.nickname);
vm.getServiceSession();
}
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Services and Factories</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body ng-controller="sessionController as vm">
<div class="container">
<h1>Services and Factories</h1>
<div class ="form-group row">
<div class ="col-sm-4">
<label>Name</label>
</div>
<div class ="col-sm-8">
<input type = "text" class ="form-control" ng-model ="vm.model.name">
</div>
</div>
<div class ="form-group row">
<div class ="col-sm-4">
<label>Nickname</label>
</div>
<div class ="col-sm-8">
<input type = "text" class ="form-control" ng-model ="vm.model.nickname">
</div>
</div>
<div class = "form-group row">
<div class = "col-sm-8 col-sm-offset-4">
<input type = "button" ng-click = "vm.setServiceSession()" class = "btn btn-primary" value = "Save"/>
<input type = "button" ng-click ="vm.getServiceSession()" class = "btn btn-default" value = "Retrieve from Service"/>
</div>
</div>
<pre>{{vm.model | json }}</pre>
</div>
The problem with the above code is that it doesnt change the string case and i cant figure out why.
You need to assign the new value of name.toLowerCase() and name.toUpperCase() to a new value name as #Rajesh said in his comment, and of course return name in the end in your factory. You also have to format the $scope.model.name while saving it in the localStorage like this :
sessionService.save('name', formatFactory.formattingFactoryObject($scope.model.name));
You also need to refactor your factory.
I created a working Fiddle.
Currently have a custom EditorTemplate which dynamically populates based on the incomming Model () in the Razor page.
The aim is to be able to hide the individual div 'Sub_Text' in the editor template based on the radio value.
Model: Prime.cs
public class Prime{
public List<QuestionModel> Questions { get; set; }
}
Model: QuestionModel.cs
public class QuestionModel{
public int Id { get; set; }
public string Question { get; set; }
public string Answer { get; set; }
public string SubText { get; set; }
}
Main View: _Reporting.cshtml
#model ViewModels.Prime
#for (int i = 0; i < Model.Questions.Count(); i++) //Dynamically generate and model bind database PolicyHolderKeyQuestions
{
#Html.EditorFor(x => x.Questions[i], "QuestionModel")
}
EditorTemplate: QuestionModel.cshtml
#model ViewModels.QuestionModel
#{
<div class="col-lg-2">
#Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.Yes)
#Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.No)
#Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.NA)
</div>
<div class="col-lg-9">
<div class="row">
<p>
<strong>#Model.Question</strong>
</p>
</div>
<div class="row" name="**Sub_Text**"> #* **Hide Me!** *#
#Model.SubText
</div>
</div>
}
So far the closest idea I have found is to add a script something like this to the bottom of the template:
<script type="text/javascript">
$(':radio[name=Answer').change(function () {
// read the value of the selected radio
var value = $(this).val();
var doc
if (value == 1) {
$('#Sub_Text').show();
}else{
$('#Sub_Text').hide();
}
});
</script>
Which seems to be able to work for something simpler without using #Html.EditorFor() in a loop.
It looks as if the script does not follow the same automatic naming changes as those that happen to the RadioButtonFor elements. Resulting in things like this:
Radio:
<input id="Questions_0__Answer" name="Questions[0].Answer" type="radio" value="No" />
While the divs and scripts keep referencing only what was directly entered.
How can you dynamically hide the "Sub_Text" div based on the radiobutton when it is nested in this way?
If there is a way to do this without feeding in a script per EditorFor radio group that would be even better, but all solutions are welcome.
Wrap the html generated by the EditorTemplate in a container so that you can use relative selectors
#model ViewModels.QuestionModel
<div class="question"> // container
<div class="col-lg-2">
#Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.Yes)
....
</div>
<div class="col-lg-9">
....
<div class="row">#Model.SubText</div>
</div>
</div>
and then the script can be
$(':radio').change(function () {
// get the associated element containing the SubText value
var row = $(this).closest('.question').find('.row');
if ($(this).val() == 1) {
row.show();
} else {
row.hide();
}
});
Side note: If your QuestionModel.cshtml is in the /Views/Shared/EditorTemplates or /Views/yourControllerName/EditorTemplates folder (which it should be) then the code in _Reporting.cshtml should be just
#model ViewModels.Prime
#Html.EditorFor(x => x.Questions)
No loop is required. The EditorFor() accepts IEnumerable<T> and generates the correct html for each item in the collection.
I have a case where in my Vue.js with webpack web app, I need to display dynamic images. I want to show img where file name of images are stored in a variable. That variable is a computed property which is returning a Vuex store variable, which is being populated asynchronously on beforeMount.
<div class="col-lg-2" v-for="pic in pics">
<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>
However it works perfectly when I just do:
<img src="../assets/dog.png" alt="dog">
My case is similar to this fiddle, but here it works with img URL, but in mine with actual file paths, it does not work.
What should be correct way to do it?
I got this working by following code
getImgUrl(pet) {
var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")
}
and in HTML:
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>
But not sure why my earlier approach did not work.
Here is a shorthand that webpack will use so you don't have to use require.context.
HTML:
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>
Vue Method:
getImgUrl(pic) {
return require('../assets/'+pic)
}
And I find that the first 2 paragraphs in here explain why this works? well.
Please note that it's a good idea to put your pet pictures inside a subdirectory, instead of lobbing it in with all your other image assets. Like so: ./assets/pets/
You can try the require function. like this:
<img :src="require(`#/xxx/${name}.png`)" alt class="icon" />
The # symbol points to the src directory.
source: Vue URL transfrom rules
There is another way of doing it by adding your image files to public folder instead of assets and access those as static images.
<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >
This is where you need to put your static images:
Your best bet is to just use a simple method to build the correct string for the image at the given index:
methods: {
getPic(index) {
return '../assets/' + this.pics[index] + '.png';
}
}
then do the following inside your v-for:
<div class="col-lg-2" v-for="(pic, index) in pics">
<img :src="getPic(index)" v-bind:alt="pic">
</div>
Here's the JSFiddle (obviously the images don't show, so I've put the image src next to the image):
https://jsfiddle.net/q2rzssxr/
Vue.js uses vue-loader, a loader for WebPack which is set up to rewrite/convert paths at compile time, in order to allow you to not worry about static paths that would differ between deployments (local, dev, one hosting platform or the other), by allowing you to use relative local filesystem paths. It also adds other benefits like asset caching and versioning (you can probably see this by checking the actual src URL being generated).
So having a src that would normally be handled by vue-loader/WebPack set to a dynamic expression, evaluated at runtime, will circumvent this mechanism and the dynamic URL generated will be invalid in the context of the actual deployment (unless it's fully qualified, that's an exception).
If instead, you would use a require function call in the dynamic expression, vue-loader/WebPack will see it and apply the usual magic.
For example, this wouldn't work:
<img alt="Logo" :src="logo" />
computed: {
logo() {
return this.colorMode === 'dark'
? './assets/logo-dark.png'
: './assets/logo-white.png';
}
}
While this would work:
<img alt="Logo" :src="logo" />
computed: {
logo() {
return this.colorMode === 'dark'
? require('./assets/logo-dark.png')
: require('./assets/logo-white.png');
}
}
I just found out about this myself. Took me an hour but... you live, you learn, right? 😊
I also hit this problem and it seems that both most upvoted answers work but there is a tiny problem, webpack throws an error into browser console (Error: Cannot find module './undefined' at webpackContextResolve) which is not very nice.
So I've solved it a bit differently. The whole problem with variable inside require statement is that require statement is executed during bundling and variable inside that statement appears only during app execution in browser. So webpack sees required image as undefined either way, as during compilation that variable doesn't exist.
What I did is place random image into require statement and hiding that image in css, so nobody sees it.
// template
<img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt />
//js
data() {
return {
userAvatar: require('#/assets/avatar1.svg'),
hidden: true
}
}
//css
.hidden {display: none}
Image comes as part of information from database via Vuex and is mapped to component as a computed
computed: {
user() {
return this.$store.state.auth.user;
}
}
So once this information is available I swap initial image to the real one
watch: {
user(userData) {
this.userAvatar = require(`#/assets/${userData.avatar}`);
this.hidden = false;
}
}
Here is Very simple answer. :D
<div class="col-lg-2" v-for="pic in pics">
<img :src="`../assets/${pic}.png`" :alt="pic">
</div>
<img src="../assets/graph_selected.svg"/>
The static path is resolved by Webpack as a module dependency through loader.
But for dynamic path you need to use require to resolve the path. You can then switch between images using a boolean variable & ternary expression.
<img :src="this.graph ? require( `../assets/graph_selected.svg`)
: require( `../assets/graph_unselected.svg`) " alt="">
And of course toggle the value of the boolean through some event handler.
<div
v-for="(data, i) in statistics"
:key="i"
class="d-flex align-items-center"
>
<img :src="require('#/assets/images/'+ data.title + '.svg')" />
<div class="ml-2 flex-column d-flex">
<h4 class="text-left mb-0">{{ data.count }}</h4>
<small class="text-muted text-left mt-0">{{ data.title }}</small>
</div>
</div>
You can use try catch block to help with not found images
getProductImage(id) {
var images = require.context('#/assets/', false, /\.jpg$/)
let productImage = ''
try {
productImage = images(`./product${id}.jpg`)
} catch (error) {
productImage = images(`./no_image.jpg`)
}
return productImage
},
I also faced this problem.
Try it:
computed {
getImage () {
return require(`../assets/images/${imageName}.jpg`) // the module request
}
}
Here is a good article that clarifies this:
https://blog.lichter.io/posts/dynamic-images-vue-nuxt/
Tried all of the answers here but what worked for me on Vue2 is like this.
<div class="col-lg-2" v-for="pic in pics">
<img :src="require(`../assets/${pic.imagePath}.png`)" :alt="pic.picName">
</div>
As I am using Gridsome, this way worked for me.
**I also used toLowerCase() method
<img
:src="
require(`#/assets/images/flags/${tournamentData.address.country_name.toLowerCase()}.svg`)
"
/>
well the best and easiest way that worked for me was this of which i was fetching data from an API..
methods: {
getPic(index) {
return this.data_response.user_Image_path + index;
}
}
the getPic method takes one parameter which is the name of the file and it returns the absolute path of the file maybe from your server with the file name simple...
here is an example of a component where i used this:
<template>
<div class="view-post">
<div class="container">
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here">
<small id="helpId" class="form-text user-search text-muted">search for a user here</small>
</div>
<table class="table table-striped ">
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>age</th>
<th>photo</th>
</tr>
</thead>
<tbody>
<tr v-bind:key="user_data_get.id" v-for="user_data_get in data_response.data">
<td scope="row">{{ user_data_get.username }}</td>
<td>{{ user_data_get.email }}</td>
<td>{{ user_data_get.userage }}</td>
<td><img :src="getPic(user_data_get.image)" clas="img_resize" style="height:50px;width:50px;"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'view',
components: {
},
props:["url"],
data() {
return {
data_response:"",
image_path:"",
}
},
methods: {
getPic(index) {
return this.data_response.user_Image_path + index;
}
},
created() {
const res_data = axios({
method: 'post',
url: this.url.link+"/view",
headers:{
'Authorization': this.url.headers.Authorization,
'content-type':this.url.headers.type,
}
})
.then((response)=> {
//handle success
this.data_response = response.data;
this.image_path = this.data_response.user_Image_path;
console.log(this.data_response.data)
})
.catch(function (response) {
//handle error
console.log(response);
});
},
}
</script>
<style scoped>
</style>
I encountered the same problem.
This worked for me by changing '../assets/' to './assets/'.
<img v-bind:src="'./assets/' + pic + '.png'" v-bind:alt="pic">
The image needs to be transcribed.
What worked for me is putting the images in public folder. i.e public/assets/img
Dynamic Image Tag:
<div v-for="datum in data">
<img
class="package_image"
style="max-width:200px;"
alt="Vue logo"
:src="`./assets/img/${datum.image}`"
>
<div>
I have a solution you may want to try.
Define a method like below
methods: {
getFlagImage(flag){
return new URL('/resources/img/flags/'+flag+'.png', import.meta.url);
},
}
then images can be called with the established for loop
<li :class=" 'nav-item', {'active': language === key} " v-for="(value,
key) in locals" :key="value ">
<a class="dropdown-item" #click="switchLanguageTo(key)">
<img :src="getFlagImage(key)" /> {{value}}
</a>
</li>
I think I found the best solution to this problem by accident!
The only thing you have to do is to start addressing from the root.
Doesn't work
<img :src="'../assets/' + pic + '.png">
Work:
<img :src="'src/assets/' + pic + '.png">
As of today, working with VUE 3 + Typescript & composition API, what I have done is wrap require function in try catch to handle crash.
computed: {
getImage() {
let imgSrc = "";
try {
imgSrc = require(`../assets/weather-widget-icons/ww-icon-${this.weatherForecast.main.toLowerCase()}.svg`);
} catch (error) {
console.error(`Image '../assets/weather-widget-icons/ww-icon-${this.weatherForecast.main.toLowerCase()}.svg' not found!`);
}
return imgSrc;
}
}
and call this function in image tag:
<div class="weather-icon">
<img :src="getImage" :alt="weatherForecast.main" />
</div>
I am using the below mentioned code on my JSP:
<%
List eCCategoryList = form.getCategoryList();
//Map<String, String> catNameImgMap = (Map<String, String>) session.getAttribute("catNameImgMap");
Map catNameImgMap = (Map) form.getBlogIdNameMap();
String strImage = "";
Iterator it = eCCategoryList.iterator();
ECircularCategory category = null;
int counter = 0;
while (it.hasNext()) {
category = (ECircularCategory) it.next();
strImage = (String) catNameImgMap.get(category.getName());
%>
strImage contains image which I need to display on my JSP. I tried displaying the images like:
<img src="<%=strImage%>" alt="Test Image 1" width="270" height="190"/>
but the above code is not working a simple blank space is shown and nothing else, I need to display the images on my JSP page each of which are stored in the strImage string, how do I do it?
Please suggest.
You could use JSTL tag:
<img src="<c:url value="<%=strImage%>"/> alt="Test Image 1" width="270" height="190"/>
Here is a good link about JSTL.
Hope it helps...