英文:
Vite with react - Browser error "Uncaught SyntaxError: ambiguous indirect export: jose"
问题
"jose" export indirect ambiguous: SyntaxError Uncaught error console returns page inspected browser shown image no but JSX with image an render to trying I'm:
代码部分不翻译。
<details>
<summary>英文:</summary>
I'm trying to render an image with `JSX` but there's no image shown in the browser. I inspected the page and it returns this error on console "Uncaught SyntaxError: ambiguous indirect export: jose"
Here's the code:
import { jose } from "../img/react-logo.png";
export function Headerr() {
return(
<>
<div className="redes">
<img src={jose} alt="" />
</div>
<h1>Pizza</h1>
</>
)
}
</details>
# 答案1
**得分**: 0
在使用像图片这样的静态资产在 *Vite* 中时，有多种解决方案可用。一种方法是使用 `new URL` 函数。
```js
export function Headerr() {
const jose = new URL('../img/react-logo.png', import.meta.url).href
return(
<>
<div className="redes">
<img src={jose} alt="" />
</div>
<h1>Pizza</h1>
</>
)
}
这种方法允许你根据模块的位置动态生成正确的图片URL。
英文:
When working with static assets like images in Vite, there are multiple solutions available. One approach is to use the new URL function.
export function Headerr() {
const jose = new URL('../img/react-logo.png', import.meta.url).href
return(
<>
<div className="redes">
<img src={jose} alt="" />
</div>
<h1>Pizza</h1>
</>
)
}
This approach allows you to dynamically generate the correct URL for the image based on the module's location.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论