HTML图像未加载图像src

Posted 2023-02-22

【中文标题】HTML图像未加载图像src

【英文标题】：HTML image not loading the image src

【发布时间】：2021-10-03 15:32:15

【问题描述】：

大家好，我正在用 react js 制作一个 TodoApp，我有一个简单的布局，我想在应用程序中添加一些图像。但是当我添加图像时，它不会加载该图像。

这里是代码

import TodoList from './components/TodoList';
import imagem from './skate.png'


function App() 
  return (
    
    <div className="todo-app">
        <TodoList />
        <img src="imagem"/>
    </div>
  );


export default App;

这是正在发生的事情的图片：

【参考方案1】：

当使用打包器（如 Parcel 或 Webpack）处理图像时，您需要记住导入的值是一个变量。

您使用 和 将变量传递给道具。使用一对" 会给你一个硬编码的字符串。

    <img src=imagem />

【讨论】：

太棒了。因此，如果我使用网站链接，我会使用“”而不是 ？

如果你想传递一个带有 URL 的硬编码字符串，那么你可以使用 " 和 "。

嗯 okok 有道理

【参考方案2】：

如果你这样做呢：

<img src=imagem />

否则，它会被解释为字符串，并且您的网站上没有 http://../imagen。

【讨论】：

哦，好吧，太有道理了，我是这方面的新手

当您做出更多反应时，这些事情会变得更加明显。很高兴为您提供帮助。

【参考方案3】：

你的代码的问题是

"imagem"

被读取为字符串。要将其作为图像读取，请在其周围放置 ：

imagem

【讨论】：

哦，好吧！说得通

没问题！我喜欢你网站的设计:)

啊哈哈哈哈

【参考方案4】：

所以， 在 React.js (jsx) 中，事情不像 html 那样工作。您正在做的是从其位置导入图像，使用： 从'./skate.png'导入图片；

然后，在你的函数内部。 如果您导入任何内容（图像、css 文件、json 文件），您需要调用它才能使用它。

例如：

从 './data.json' 导入 JsonData

function App()
return(
  <div>
    <JsonData/>
  </div>
)

调用它。 所以在你的情况下，你只需要更换 到

它应该可以工作。

【讨论】：

不，导入的图片不是组件，不会导入JSON。

【参考方案5】：

"imagem" 是字符串。需要变量imagem]。

【讨论】：

哦，有道理，我是新手

【参考方案6】：

当您在 jsx 中使用 qoutes "" 时，它会将其作为字符串使用，而当您使用 时，它会将其作为普通 JS 使用，因此在您的情况下，如果您使用

<img src=imagem />

这会解决你的问题