陣營機映像URI不起作用

我試圖從本地文件顯示圖像，所以我嘗試這樣做陣營機映像URI不起作用

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}} 
    style={{height:150,width:150}} 
/>

我的容器組件似乎越來越高度和寬度，但圖像沒有按」噸負載。因此，我想這

<Image 
    source={require('../../assets/img_src/BTI.jpg')} 
    style={{height:150,width:150}} 
/>

它的作品真的很好，可惜的是，據我知道，如果我想第一個操作地址文件並將其存儲到一個變量，我不能使用此實現。實施例：

const imgSrc = `../../assets/${data.image}`;

其中data.image = 'img_src/BTI.jpg'。我嘗試刪除android工作室中android模擬器上的所有數據，但結果仍然相同。難道我做錯了什麼？有更好的實現嗎？

感謝很多:)

來源

2017-03-27 Irvan

你的意思是你不能使用source = {require（imgSrc）}？ – Hariks

看起來發生這種情況是因爲您試圖使用變量名稱作爲源包含資產。這裏接受的答案給出了一些洞察，爲什麼這不起作用：http://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names#30868078 – QMFNP

@Hariks是啊，一個錯誤信息會出現 – Irvan

不能夠require()動態路徑是本地做出反應的預期行爲，包裝者需要預先知道路徑 - 見React Native issues

我們有這個問題，我們的項目中，我們將圖像URL存儲在我們的數據庫中，並希望在應用中連接字符串以獲取本地存儲圖像的路徑。正如你發現的，這不起作用。您可能會發現我們的解決方法很有用。

在我們/images文件夾中，我們創建了一個新的images.js文件，該文件只是導出的對象，它的鍵映射到所有本地圖像路徑，像這樣

export const Images = { 
    image1: require('./image1.png'), 
    image2: require('./image2.png'), 
    image3: require('./image3.png'), 
    };

現在打包提前知道所有的路徑，並很高興。然後我們添加一個imageKey到數據庫項目並使用它而不是絕對路徑。要獲取圖像，我們只是做了

import { Images } from '../images/images'; 
// get your image key e.g. passed down through props 
const img = Images[imageKey]; 

... 
render() { 
    ... 
    <Image source={img} /> 
    ... 
}

可能不適合您的確切用例，但希望您可能能夠使用它。

來源

2017-03-27 19:50:38 drjimmie1976

類似的方法也適用於我。 – milkersarac

陣營機映像URI不起作用

回答

相關問題