Javascript 在JS包中包含图片
我的情况如下:Javascript 在JS包中包含图片,javascript,reactjs,npm,bundle,rollup,Javascript,Reactjs,Npm,Bundle,Rollup,我的情况如下: import { uglify } from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' import url from 'rollup-plugin-url' const config = { input: 'src/index.js', external: ['react'], output: { format: 'umd', name: 'react-co
import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import url from 'rollup-plugin-url'
const config = {
input: 'src/index.js',
external: ['react'],
output: {
format: 'umd',
name: 'react-components',
globals: {
react: "React"
}
},
plugins: [
babel({
exclude: "node_modules/**"
}),
uglify(),
url(),
]
}
export default config
我为React创建了一个组件库。因此,我有一个包含一些图片的软件包(与Rollup捆绑在一起)(目前仅在组件中使用GIF图片)
使用我的图片的组件如下所示:
import React from 'react';
import PropTypes from 'prop-types';
import ui_spinner from '../../../assets/ui_progress.gif';
/**
* CircularSpinner
* Add a spinner when the user needs to wait
*/
class CircularSpinner extends React.PureComponent {
static propTypes = {
/** Width of the component */
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Height of the component */
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Style of the component (overload existing properties) */
style: PropTypes.object,
}
static defaultProps = {
width: 128,
height: 128,
style: {},
}
render() {
const { style, width, height } = this.props;
return (
<img src={ui_spinner} width={width} height={height} style={style} alt="ui_progress" aria-busy="true" />
);
}
}
export default CircularSpinner;
我使用rollup-c-odist/index.js构建
dist文件夹包含以下内容:
dist/
assets
92be5c546b4adf43.gif
index.js
在我的测试应用程序中,使用我的图片的组件如下所示:
谢谢你的帮助
达米恩我找到了解决这个问题的办法。此响应可能有助于某人:
我更新我的汇总配置以使用汇总插件img。我已经使用过,但我的配置不正确:
正确的配置如下所示:
import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import image from 'rollup-plugin-img'
const config = {
input: 'src/index.js',
external: ['react'],
output: {
format: 'umd',
name: 'react-components',
globals: {
react: "React"
}
},
plugins: [
babel({
exclude: "node_modules/**"
}),
image({
limit: 100000,
}),
uglify(),
]
}
export default config
我的错误是我的GIF有点大,默认限制大小是8192字节。
在这种情况下,我有以下错误:
Error: Could not load <path of image> (imported by <path of component that use image>): The "path" argument must be of type string. Received type undefined
错误:无法加载(由导入):“path”参数的类型必须为string。接收类型未定义
当我更新配置以增加限制时,一切正常查看您的devtools网络选项卡-图像是否正在尝试加载?你有404吗?他们试图从哪个路径加载?我得到的URL状态为200。我觉得我的照片没有正确曝光。我找到了解决办法(见下一个答案),谢谢你的回复!