将图像与来自作为属性传入的对象的URL绑定

Question

我正在使用Vue cli，我将父组件中的对象作为属性传递给子组件。

这是对象的一个​​示例（在父组件中，但作为道具传递）

{
        question: 'How many times is Jon stabbed when he is murdered at Castle Black?',
        choices: ['1', '6', '9', '10'],
        answer: '6',
        imgUrl: './src/assets/0.jpg'
    }

这是我试图将其绑定到子组件中的图像标记。 questionIndex只是我用来在用户移动到下一个问题时能够呈现下一个问题的数字。

<img :src="questions[questionIndex].imgUrl"/>

我得到的错误是： 获取http://localhost:8080/src/assets/0.jpg 404（未找到）

除了图像，我能够渲染一切。我相信它与webpack有关，但我不确定。我曾尝试查看类似的线程，但所有人都试图渲染一个已作为数据从vue实例传递的单个图像。虽然我的情况不同。

只是为了让事情更清楚..我正在尝试在Trivia组件中渲染，并且从App组件传入对象（props）。

Answer 1

动态文件和图像应存储到静态文件夹中，然后引用路径，而root是index.html

./静态/图像/ 0.jpg

Answer 2

这是粗略的代码。但是 vue 用户会得到这个。 孩子：

<img :src="require(`@/assets/${image}`)">
props: ['image']

家长：

<child-tag image="file.extension" />

src/assets: 应该有文件 file.extension