Javascript 将图像源从父组件传输到子组件vuejs
我使用一个变量将图像的文件名存储在父组件中,然后使用props将其传输到子组件。但是,子元素没有渲染图像 父组件数据:Javascript 将图像源从父组件传输到子组件vuejs,javascript,html,vue.js,Javascript,Html,Vue.js,我使用一个变量将图像的文件名存储在父组件中,然后使用props将其传输到子组件。但是,子元素没有渲染图像 父组件数据: first_day: [ { class: "card1", time: "1:00", talk: "1 Name of talk", description: "1 Talk description will be here Lorem Ipsum
first_day: [
{
class: "card1",
time: "1:00",
talk: "1 Name of talk",
description: "1 Talk description will be here Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...",
speaker: "first last",
pic_url: "logo.png"
}
]
子组件html:
<img v-bind:src="'../assets/' + pic_url">
文件结构:
project folder
-src
-assets
-logo.png
-components
-child component (.vue)
-parent component (.vue)
图像位于资产中- 如果道具首先到达子组件,则进行故障排除,例如,尝试先控制台记录道具
- 然后尝试使用计算属性生成源链接
computed: {imgsrc: `.../assets/${this.pic_url}`}
- 然后只需调用模板中的computed属性
<img :src="imgsrc">
<img v-bind:src="require(`@/assets/${pic_url}`)">
或
谢谢,我还可以使用computed
<img v-bind:src="require(`@/assets/${pic_url}`)">
<img v-bind:src="require(`../assets/${pic_url}`)">