React 元件引用本地圖片問題
阿新 • • 發佈:2019-02-01
es6不支援在<img />標籤內直接寫圖片的路徑,即:
<img src="../images/photo.png"/>
這種格式是不支援的。在網上看了很多部落格,總結下以下幾個載入的方法,當然,這種是在圖片不多的情況下可以採用。
一.少量圖片的時候,單張引入
(1)import 方法:
import logos from '../../assets/images/logos.png';//src/assets
render() {
return (
<img alt="logo" src={logos} />
)
}
(2)require方法
<img alt="logo" src={require('../../assets/images/logos.png')} />
這種方法需要注意的是,require裡只能寫字串,不能寫變數。
這兩種辦法可以解決圖片不多,在前端直接載入圖片路徑的問題。那麼,假設需要從資料庫中讀取圖片的路徑,require不能寫變數,import from後面也不能寫變數,那麼該怎麼辦呢,現在也假設兩種情況。
二.多圖片的時候
(1)圖片了不大的情況 且知道圖片順序的情況下
json:
[ { "name":'img1' "img":"img1", "url":"" }, { "name":"img2", "img":"img2", "url":"" }, { "name":"img3", "img":"img3", "url":"" } ]
react:
import img1 from'./../images/img1.png'; import img2 from'./../images/img2.png'; import img3 from'./../images/img3.png'; const imgsArr = [img1,img2,img3]; render(){ return( <div> { imgsArr.map(function(name){ return( <img src={name} /> ) }) } </div> ) }
這個只能滿足圖片量不大,且知道圖片載入順序的情況下。
(2)圖片量很大,且圖片順序需與json檔案的name一致
這種情況下,看了網站上一個部落格,可以同時import 一個資料夾下面的圖片路徑放到一個數組arrIMGURL裡,就想到了一個方法,假設全部載入到圖片裡,在後臺json檔案的"img"屬性裡寫該圖片的名字a,在渲染的時候,遍歷存放圖片路徑陣列,假設arrIMGURL包含a,則渲染該圖片。程式碼如下:
1、全部載入圖片路徑
const requireContext = require.context("./../img/project",true, /^\.\/.*\.png$/);
const projectImgs = requireContext.keys().map(requireContext);
2、渲染
createContent(){
var _this = this;
for (var i = 0;i<this.dataSource.length;i++){
var columns = [];
var imgURL;
for (var j = 0; j < projectImgs.length;j++){
if(projectImgs[j].indexOf(_this.dataSource[i].img) > 0){
imgURL = projectImgs[j];
}
}
columns.push(<div className="projectImg"><img src={imgURL} alt=""/></div>);
columns.push(<a href={_this.dataSource[i].url}>{_this.dataSource[i].name}</a>);
result.push(<div className="projectContent">{columns}</div>);
}
return result;
};