Cant render an image from Django API in VueJs

Question

How do I render an image from Django RestAPI to Vuejs Frontend. I can get all the model elements in VueJS but image rendering causes =>

 invalid expression: Unexpected token { in

    ${article.image}

  Raw expression: v-bind:src="${article.image}"


(found in <Root>)

My template is

<article class="hentry blog-post" v-for="article in articles">
    <div class="post-thumb">
      <img v-bind:src="${article.image}" alt="">
    </div>
    <div class="post-content">
        <a href="#" class="post-category bg-blue-light">THE COMMUNITY</a>
        <a href="#" class="h4 post-title">${article.title} </a>
        <p>${article.content}</p>
        <div class="author-date">
            by
            <a class="h6 post__author-name fn" href="#">${article.author}</a>
            <div class="post__date">
                <time class="published" datetime="2017-03-24T18:18">
                    - 7 hours ago
                </time>
            </div>
        </div>
        <div class="post-additional-info inline-items">
            <ul class="friends-harmonic">
                <li>
                    <a href="#">
                        <img src="{% static 'img/icon-chat27.png' %}" alt="icon">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="{% static 'img/icon-chat2.png' %}" alt="icon">
                    </a>
                </li>
            </ul>
            <div class="names-people-likes">
                26
            </div>
            <div class="comments-shared">
                <a href="#" class="post-add-icon inline-items">
                    <svg class="olymp-speech-balloon-icon"><use xlink:href="/static/svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use></svg>
                    <span>0</span>
                </a>
            </div>

        </div>
    </div>
</article>

I changed delimiters with Vue.js for viewing Vue.js

 new Vue({
       el: '#starting',
       delimiters: ['${','}'],
       data: {
       articles: [],
       search: '',
       loading: false,
       currentArticle: {},
       message: null,
       newArticle: {
           'title': null,
           'content': null
       },
     },
     mounted: function() {
      this.getArticles();
     },
     computed: {
         filteredArticles:function (){
             return this.articles.filter((article) => {
                 return article.title.match(this.search);
             });
         }
     },
     methods: {
      getArticles: function() {
       this.loading = true;
       this.$http.get('/api/articles/')
           .then((response) => {
             console.log(response.data);
             this.articles = response.data;

             this.loading = false;
           })
           .catch((err) => {
            this.loading = false;
            console.log(err);
           })
      },...

Thanks

error is in the beginning of the question , that is all I get — ytsejam
– ytsejam, Commented Feb 13, 2019 at 15:26

deathangel908 · Accepted Answer · 2019-02-13 15:26:13Z

1

You don't need to escape variables with v-bind directive, just

<img v-bind:src="article.image" alt="">

${} or originally {{}} is used inside of templates itself:

<span> ${article.image}</span>

answered Feb 13, 2019 at 15:26

deathangel908

9,78911 gold badges54 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deathangel908 Over a year ago

I would also recommend to use Vue as SPA and use drf instead of django, if it takes a lot of work you can still serve your files as static and use django views as simple rest. That's all being said if you don't need search indexing.

Collectives™ on Stack Overflow

Cant render an image from Django API in VueJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related