Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/70.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将图像源从父组件传输到子组件vuejs_Javascript_Html_Vue.js - Fatal编程技术网

Javascript 将图像源从父组件传输到子组件vuejs

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

我使用一个变量将图像的文件名存储在父组件中,然后使用props将其传输到子组件。但是,子元素没有渲染图像

父组件数据:

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

尝试使用require函数,如

<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}`)">