Question

如何将图像从Django RestAPI渲染到Vuejs Frontend。我可以在VueJS中获得所有模型元素，但图像渲染会导致=>

 invalid expression: Unexpected token { in

    ${article.image}

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


(found in <Root>)

我的模板是

<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>

我使用Vue.js更改了分隔符以查看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);
           })
      },...

谢谢

Answer 1

您不需要使用v-bind指令对变量进行转义，只需

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

${}或最初的{{}}用于模板本身：

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

无法在VueJs中从Django API渲染图像

1 个答案: