如何使用img标签做出反应

Question

我正在尝试使用react显示我的本地图像到html。

我有app.js，它正在调用Header组件。

我正在尝试添加woods.jpg

图像不存在，为什么？

我尝试了不同的位置，但无法实现它，

src={"../w3images/woods.jpg"}
src={"./w3images/woods.jpg"}
src={"/w3images/woods.jpg"}
src="/w3images/woods.jpg"

Answer 1

您的图片必须位于要访问的公共存储库中。

然后，你可以有一个这样的img：

<img src="/w3images/woods.jpg"/>

Answer 2

我猜您的应用是从$str = '{ "menu__item_name":"test1|test2|test3", "menu_item_price":"775.00|100|30", "menu_item_description":"Melon Ball |Big mac|cocke", "menu_item_sort":"1|3|2", "menu_item_status":"1|1|1", "menu_item_display":"1|1|0" }'; $strArr = json_decode($str); $menu__item_name_arr = explode('|', $strArr->menu__item_name); $menu_item_price_arr = explode('|', $strArr->menu_item_price); $menu_item_description_arr = explode('|', $strArr->menu_item_description); $menu_item_sort_arr = explode('|', $strArr->menu_item_sort); $menu_item_status_arr = explode('|', $strArr->menu_item_status); $menu_item_display_arr = explode('|', $strArr->menu_item_display); foreach($menu_item_sort_arr as $item){ $key = $item - 1; //array index start from 0 $finalArr['menu__item_name'][] = isset($menu__item_name_arr[$key]) ? $menu__item_name_arr[$key] : '' ; $finalArr['menu_item_price'][] = isset($menu_item_price_arr[$key]) ? $menu_item_price_arr[$key] : '' ; $finalArr['menu_item_description'][] = isset($menu_item_description_arr[$key]) ? $menu_item_description_arr[$key] : ''; $finalArr['menu_item_sort'][] = isset($menu_item_sort_arr[$key]) ? $menu_item_sort_arr[$key] : '' ; $finalArr['menu_item_status'][] = isset($menu_item_status_arr[$key]) ? $menu_item_status_arr[$key] : '' ; $finalArr['menu_item_display'][] = isset($menu_item_display_arr[$key]) ? $menu_item_display_arr[$key] : ''; } foreach($finalArr as $k => $arr){ $newArr[$k] = implode('|', $arr); } $sortedJson = (object) $newArr; print_r($sortedJson); echo json_encode($sortedJson); 提供的（我看到的是一个文件夹）。

然后您必须指定相对于该文件夹的路径。

如果您的index.html位于public。

，则会显示../src/w3images/woods.jpg