我從 React JS 開始，使用代碼來顯示圖片、標題標簽和有序串列。這是JS代碼：
import React from 'react'
import ReactDOM from "react-dom"
const test = (
<div>
<img src="./balloons.png" width="100px" alt=""/>
<h1>Names</h1>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
</div>
)
ReactDOM.render(test,document.getElementById("root"))
這是 index.html 部分：
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id = "root"></div>
<script src = "index.pack.js"></script>
</body>
</html>
現在，代碼運行并在反應應用程式中顯示這樣的輸出。我上傳的圖片看不到。
如果有幫助，這是 VS Code 中的檔案夾排列：
提前致謝！
uj5u.com熱心網友回復：
如果將影像保存在公用檔案夾中，則可以正常作業
uj5u.com熱心網友回復：
嘗試匯入 Image 并在 src 中使用它：
import React from 'react'
import ReactDOM from "react-dom"
// try to import image
import YourImageUrl from './balloons.png';
const test = (
<div>
<img src="{YourImageUrl}" width="100px" alt=""/>
<h1>Names</h1>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
</div>
)
ReactDOM.render(test,document.getElementById("root"))
uj5u.com熱心網友回復：
您將首先匯入影像。像這樣寫js代碼
import React from 'react'
import ReactDOM from "react-dom"
import balloons from './balloons.png'
const test = (
<div>
<img src={balloons} width="100px" alt=""/>
<h1>Names</h1>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
</div>
)
ReactDOM.render(test,document.getElementById("root"))
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466508.html
標籤：javascript html 反应 图片 视觉工作室代码
下一篇：從陣列中映射物件值