资源引入 require

最新推荐文章于 2024-04-16 15:56:03 发布

fina_

最新推荐文章于 2024-04-16 15:56:03 发布

阅读量337

点赞数

分类专栏： JS 文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/fxinn/article/details/120850172

版权

JS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

本文讨论了在处理动态加载图片时，如何正确使用`require`关键字。通过示例，解释了为什么在`onError`事件中直接使用动态`require`会导致错误，并提供了两种正确实现方式。同时，分析了在React应用中处理图片路径错误的常见问题和解决方案。

摘要由CSDN通过智能技术生成

require

下列错误是因为，onError事件是对 img 的 src 重赋值，所以第三种写法没有实现再赋值，所以出错

img src 使用 require 并且动态拼接遇到的错误

// 正确
async function getApp() {
			try {
				const { data } = await api.getApp();
				data.forEach((item) => {
						list1.push({
							icon: require('../../../assets/' + item1.iconUrl),
							title: item.name
						});
				});
			} catch (error) {}
}

// 正确
<img src="一个路径" :onerror="onImgError">
function onImgError {
    return require('./assets/logo.png')
}

// 错误
<img src="一个路径" :onerror="onImgError">
function onImgError {
    return require('./assets/'+ item1.iconUrl);
}