I have successfully uploaded an image to the server with axios. I can preview the image in Postman but I do not know how to proceed to render the image in vuejs.

The Get Method:

public HttpResponseMessage Step(int id)
{
    StepService _StepService = new StepService(id);
    var result = new HttpResponseMessage(HttpStatusCode.OK);
    string filepath = HostingEnvironment.MapPath("~/App_Data/Uploads/" + _StepService.GetStepWithProject.step.filename);
    FileStream fileStream = new FileStream(filepath, FileMode.Open);
    Image image = Image.FromStream(fileStream);
    MemoryStream memoryStream = new MemoryStream();
    image.Save(memoryStream, ImageFormat.Jpeg);
    result.Content = new ByteArrayContent(memoryStream.ToArray());
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
    return result;
}

Vuejs

getMoreInfo (step) {
    axios({
        method: 'get',
        url: 'http://localhost:20449/api/steps',
        headers: {
          'Content-type': 'image/jpeg'
        },
        params: {
          id: step.id
        }
     }).then(response => {
        this.more = response.data // I do not think its the right way             
     })
  },

How do I render the image in the html tag?

I have successfully uploaded an image to the server with axios. I can preview the image in Postman but I do not know how to proceed to render the image in vuejs.

The Get Method:

public HttpResponseMessage Step(int id)
{
    StepService _StepService = new StepService(id);
    var result = new HttpResponseMessage(HttpStatusCode.OK);
    string filepath = HostingEnvironment.MapPath("~/App_Data/Uploads/" + _StepService.GetStepWithProject.step.filename);
    FileStream fileStream = new FileStream(filepath, FileMode.Open);
    Image image = Image.FromStream(fileStream);
    MemoryStream memoryStream = new MemoryStream();
    image.Save(memoryStream, ImageFormat.Jpeg);
    result.Content = new ByteArrayContent(memoryStream.ToArray());
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
    return result;
}

Vuejs

getMoreInfo (step) {
    axios({
        method: 'get',
        url: 'http://localhost:20449/api/steps',
        headers: {
          'Content-type': 'image/jpeg'
        },
        params: {
          id: step.id
        }
     }).then(response => {
        this.more = response.data // I do not think its the right way             
     })
  },

How do I render the image in the html tag?

• javascript
• c#
• asp-web-api
• vue.js
• axios

1 Answer 1

I found a solution which works for me. I converted the image to base64.

The HttpGet Method

public string Step(int id)
{
    StepService _StepService = new StepService(id);
    string filepath = HostingEnvironment.MapPath("~/App_Data/Uploads/" + 
    _StepService.GetStepWithProject.step.filename);
     byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
     string base64ImageRepresentation = Convert.ToBase64String(imageArray);
     return base64ImageRepresentation;
}

Vue Template

<img :src="image" alt="Base64 encoded image" />

Axios function

getMoreInfo (step) {
    this.image = ''
    axios({
        method: 'get',
        url: 'http://localhost:20449/api/steps',
        headers: {
          'Content-type': 'image/jpeg'
        },
        params: {
          id: step.id
        }
     }).then(response => {
        this.image = 'data:image/jpg;base64,'.concat(this.image.concat(response.data))            
     })
  },

export default {
    data () {
        image: ''
    }
}