綁定圖像與作爲屬性傳入的對象的url

我使用Vue cli，並將父對象作爲屬性傳遞給子組件。綁定圖像與作爲屬性傳入的對象的url

這是一個對象的一個例子（父組件，但經過一個道具）

{ 
     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實例數據傳遞的圖像。而我的情況是不同的。

只是爲了使事情更清晰..我試圖呈現在瑣事組件和對象（道具）從應用程序組件傳入。

來源

2017-09-19 jonathanpuc

'http：// localhost：8080 /'指向'build'目錄。使用'imgUrl：'../../ src/assets/0.jpg'' – AlphaQ

是的！你應該將你的圖像移動到/建立文件夾。這些是公共文件，不是源文件 –

imgUrl：'../../src/assets/0.jpg'。不幸的是，仍然沒有爲我工作。 – jonathanpuc

動態文件和圖像應該被存儲到靜態文件夾，然後引用該路徑而根是index.html的

./static/images/0.jpg

來源

2017-09-19 12:21:28

真棒，它工作。所以爲了澄清，圖像應該總是進入靜態？那麼什麼是資產文件夾？ – jonathanpuc

資產用於靜態圖像和文件，這些文件不會從CMS系統或其他內容中更改，例如始終存在的靜態徽標或字體，甚至不使用動態路徑的圖像/ svgs –

綁定圖像與作爲屬性傳入的對象的url

回答

相關問題