0

The problem is that images are not showing in my webpage. I am reading the image paths from json file.

I already tried removing keep-alive from router-view. But that way the components are destroyed.

App.vue

<keep-alive>
    <router-view></router-view>
</keep-alive>

This is a part of the json file: { "id": 2, "hasquestionText": true, "text": "This is a Figurative type question", "hasquestionImage": true, "imagepath": "s3.amazons.com/3/A/queimage.png", "hasoptionText": true, "optionA": null, "optionB": null, "optionC": null, "optionD": null, "optionText": "This is option text", "correctoption": "B", "hasoptionImage": true, "optionimagepath": "s3.amazons.com/3/A/optionimage.png", "hasexplanationText": true, "explanationtext": "This is Figurative Explanation Text", "hasexplanationImage": true, "explanationimagepath": "s3.amazons.com/3/A/explanationimage.png", "chapterId": 1, "subchapterId": 1, "questiontypeId": 2, "questionlevelId": 2 },

This is how I am displaying images: 

<v-container grid-list-md text-xs-center v-show="hqi">
  <v-layout row wrap>
       <v-flex xs12>

         <img :src="'http://' + url1" />

       </v-flex>
    </v-layout>
 </v-container>

and script is

data () {
    return {
        i: 0
    }   


created: function () {
   this.hqi = this.userData[this.i].hasquestionImage
   this.url1 = this.userData[this.i].imagepath
}

The expected result is to show the images in my webpage. But actual result is I am getting 

<img data-v-29b06b20="" src="http://null">

in chrome developer tools. And I am getting this error:

net::ERR_NAME_NOT_RESOLVED

Boidurja Talukdar
  • 676
  • 2
  • 21
  • 42
  • Are you sure it's specific to vuetify? It seems like the problem is related to `img` tag and path you provided. – Traxo Jul 03 '19 at 11:16
  • I think you need to check here: https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working – Imre_G Jul 03 '19 at 11:20
  • I don't understand why the path is showing null. In json the path is "s3.amazons.com/3/A/queimage.png" – Boidurja Talukdar Jul 03 '19 at 11:58
  • Hey, as mentioned it probably is a problem with your json path. I've created a fiddle https://jsfiddle.net/dawpqe93/ and there is no problem. – Loïc Monard Jul 03 '19 at 12:09

0 Answers0