将图像与作为属性传入的对象的 url 绑定答案

【问题标题】：Binding image with url from object passed in as a property将图像与作为属性传入的对象的 url 绑定
【发布时间】：2017-09-19 12:13:33
【问题描述】：

我正在使用 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"/>

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

除了图像之外，我可以渲染一切正常。我相信它与 webpack 有关，但我不确定。我试过查看类似的线程，但他们都是试图渲染单个图像的人，该图像已作为数据从 vue 实例传递。而我的情况不同。

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

【问题讨论】：

http://localhost:8080/ 指向build 目录。使用imgUrl: '../../src/assets/0.jpg'
是的！您应该将图像移动到 /build 文件夹。这些是公共文件，不是源文件
imgUrl: '../../src/assets/0.jpg'。不幸的是仍然没有为我工作。

标签： javascript object vue.js vuejs2 vue-component

【解决方案1】：

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

./static/images/0.jpg

【讨论】：

太棒了，它奏效了。所以只是为了澄清，图像应该总是静态的吗？那么资产文件夹是做什么用的呢？
assets 用于静态图像和文件，它们不会从 CMS 系统或其他东西中更改，例如始终存在的静态徽标或字体甚至在没有动态路径的情况下使用的图像/svgs

【解决方案2】：

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

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

家长：

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

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

【讨论】：