1

So, I have this component

<template> <div class="newsitem"> <img src="${{imageurl}}" alt="newsimage" width="200" height="100"> <h1 class="newstitle">{{title}}</h1> <p class="newsdescription">{{description}}</p> </div> </template> <script> export default { props: { title: String, description: String, imageurl: String }, data() { return {}; } }; </script> 

The imageurl is an actual online link to an image. But I cannot see an image on my page.

Does someone know, how to pass it right to the image src?

This is where the prop comes from:

<NewsItem :title="nachricht.title" :description="nachricht.description" :imageurl="nachricht.urlToImage"/> 

1 Answer 1

2

Just bind the image src, like <img :src="imageurl" alt="newsimage" width="200" height="100">:

Vue.component('NewsItem', { template: ` <div class="newsitem"> <img :src="imageurl" alt="newsimage" width="200" height="100"> <h1 class="newstitle">{{title}}</h1> <p class="newsdescription">{{description}}</p> </div> `, props: { title: String, description: String, imageurl: String }, }) new Vue({ el: "#demo", data() { return { nachricht: {title: 'aaa', description: 'aaaaaa', urlToImage: 'https://picsum.photos/200'} }; } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <news-item :title="nachricht.title" :description="nachricht.description" :imageurl="nachricht.urlToImage"></news-item> </div>

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

1 Comment

Thank you! So easy and I didn't get it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.