Как импортировать картинки в react
Загрузка локальных изображений в React.js
Пожалуйста, помогите мне решить это. Дайте мне знать, что я делаю не так здесь.
9 ответов
В частности, чтобы включить локальное изображение, у вас есть два варианта:
Этот подход хорош, потому что все ресурсы обрабатываются системой сборки и получат имена файлов с хешами в производственной сборке. Вы также получите сообщение об ошибке, если файл был перемещен или удален.
Недостатком является то, что это может быть громоздким, если у вас есть сотни изображений, потому что вы не можете иметь произвольные пути импорта.
Надеюсь это поможет!
У вас есть разные способы добиться этого, вот пример:
В вашем теге img просто поместите это в src:
Импортировать логотип из ‘./Logo.png’ // локальный путь
Создайте структуру папок, например
Затем импортируйте эти изображения в файл JSX
Тогда вам нужно использовать в изображениях src, как показано ниже.
В React или любых модулях Javascript, которые внутренне используют Webpack, если значение атрибута src для img задано в виде пути в строковом формате, как указано ниже
Таким образом, решение этой проблемы заключается либо в том, чтобы поместить ваше изображение в общедоступный каталог и ссылаться на относительный путь из общедоступного каталога, либо использовать ключевые слова import или require в React или любом модуле Javascript, чтобы сообщить Веб-пакету прочитайте этот путь во время фазы сборки и включите изображение в окончательный результат сборки. Детали обоих этих методов были разработаны Даном Абрамовым в его ответе. Пожалуйста, обратитесь к нему или используйте ссылку: https://create-react-app.dev/docs/adding-images-fonts-and-files/
Чтобы загрузить локальные изображения в приложение React.js, вам необходимо добавить параметр require в разделы мультимедиа, например, или теги изображений, как показано ниже:
Вместо использования img src = «», попробуйте создать div и установить background-image в качестве изображения, которое вы хотите.
Прямо сейчас это работает для меня.
Файлы внутри общей папки не уменьшаются или не обрабатываются,
Вы не можете использовать хешированное имя (необходимо установить в конфиге веб-пакета) для изображений, если вы это сделаете, вам придется менять имена снова и снова,
Не удается найти файлы во время выполнения (компиляции), в результате ошибка 404 на стороне клиента.
Как импортировать всю папку изображений SVG (или как загружать их динамически) в веб-приложение React?
у меня есть компонент, который принимает: itemName и выплевывает HTML-пакет, содержащий изображение. Изображение отличается для каждого пакета.
вот что у меня есть:
как я могу заставить этот компонент работать?
Я знаю, что если бы я просто импортировал все мои изображения явно, я мог бы просто назвать мои изображения так.
это сработает, но поскольку мне нужно включить
60 svgs, он добавляет много лишнего кода.
также, Я нашел в этом вопросе этот код.
но это, похоже, не работает (это была часть вопроса, а не ответ), и ответ был слишком неспецифичным, чтобы ответить на вопрос, который я задаю.
Я нашел этот вопрос но опять же есть ответ (хотя и не одобренный), в котором больше вопросов, чем ответов. Итак, после установки react-svg я настроил тест, чтобы узнать, работает ли ответ так так.
но, как и OP этого вопроса, страница не может найти мой svg даже после копирования всей моей папки изображений в мою папку сборки. Я тоже пытался»./ изображения/»
Я чувствую, что мне просто не хватает последнего ключевого фрагмента информации, и после поиска за последний день, я надеялся, что кто-то может идентифицировать кусок, который мне не хватает.
4 ответов
если вы используете React, я сильно подозреваю, что вы также используете Webpack. Вы можете использовать require.context вместо es6 import и Webpack разрешит его для вас при строительстве.
. создает требуемое контекстное сопоставление всех *.svg пути к файлам в images папка для импорта. Это дает нам специализированную функцию Require с именем reqSvgs С некоторыми вложенными свойствами.
одно из свойств reqSvgs это keys метод, который возвращает список всех допустимых путей к файлам.
мы можем передать один из этих filepaths в reqSvgs to получить импортированное изображение.
этот api является сдерживающим и неинтуитивным для этого случая использования, поэтому я предлагаю преобразовать коллекцию в более распространенную структуру данных JavaScript, чтобы упростить ее работу.
вот 3 примера преобразований, которые могут быть полезны.
массив
создайте массив импортированных файлов.
массив объектов
создайте массив объектов, причем каждый объект будет < path, file >для одного изображения.
Простой Объект
создайте объект, где каждый путь является ключом к соответствующему файлу.
SurviveJS дает более обобщенный пример require.context здесь Динамическая Загрузка Webpack SurviveJS.
вместо нескольких SVG-файлов вы можете использовать один SVG-спрайт.
SVG sprite может быть сгенерирован из каталога SVG-файлов с помощью svg-спрайт-генератор:
тогда используйте его так:
вы можете просто сделать функцию, которая принимает параметр «name» (ваше имя значка svg) и возвращает ваш svg-код.
и затем вы можете импортировать его в любом месте и просто вызвать его с именем значка вы хотите.
Правильный путь для img на React.js
у меня есть некоторые проблемы с моими изображениями на моем проекте react. Действительно, я всегда думал, что относительный путь в атрибут src был построен на архитектуре файлов
вот моя архитектура файлов:
однако я понял, что путь был построен на url. В одном из моих компонентов (например, в file1.jsx) у меня есть это:
10 ответов:
вы используете относительный url, который относится к текущему url, а не к файловой системе. Вы можете решить эту проблему с помощью абсолютных URL-адресов
но это не очень хорошо, когда вы развертываете www.my-domain.bike или любой другой сайт. Лучше было бы использовать url относительно корневого каталога сайта
Если вы использовали create-react-app для создания вашего проекта, то ваша общая папка доступна. Так что вам нужно добавить свой image папка внутри общей папки.
в моем случае следующий код тоже работает.
добавлять file-loader npm в webpack.конфиг.js в соответствии с его официальной инструкцией по использованию так:
друг показал мне, как это делать следующим образом:
«./ «работает, когда файл запрашивает изображение (например, «пример.js») находится на том же уровне в структуре дерева папок, что и папка»изображения».
некоторые старые ответы не работают, другие хороши, но не объясняют тему, В общем:
если изображение находится в каталоге «public»
создать изображение для нового img, динамически:
установите изображение в существующий img с идентификатором «img1», динамически:
если изображение находится в каталоге ‘src’:
поместите логотип в общую папку, например, public/img / logo.png, а затем обратитесь к общей папке как %PUBLIC_URL%:
использование %PUBLIC_URL% в приведенном выше будет заменено URL-адресом public папка во время сборки. Только файлы внутри public на папку можно ссылаться из HTML.
Adding Images, Fonts, and Files
With webpack, using static assets like images and fonts works similarly to CSS.
You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.
To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153. You can control the 10,000 byte threshold by setting the IMAGE_INLINE_SIZE_LIMIT environment variable as documented in our advanced configuration.
Here is an example:
This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
This works in CSS too:
Please be advised that this is also a custom feature of webpack.
It is not required for React but many people enjoy it (and React Native uses a similar mechanism for images).
An alternative way of handling static assets is described in the next section.
Adding SVGs
Note: this feature is available with [email protected] and higher, and [email protected] and higher.
One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this:
This is handy if you don’t want to load SVG as a separate file. Don’t forget the curly braces in the import! The ReactComponent import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename.
Tip: The imported SVG React Component accepts a title prop along with other props that a svg element accepts. Use this prop to add an accessible title to your svg component.
Importing local images in react with webpack
Putting local files into website in react is easy with help of webpack modules: file-loader and url-loader. These two loaders are somewhat similar but url-loader can returns data URL for smaller images if file-size limit is specified.
You may ask what is data URL?
Here is an example:
The above inline text code can be interpret by modem brower into this image:
Interesting, isn’t it? The inline base64 encode data URL is for small files mostly, with file size less then a few kilobytes. And for larger files or images, url-loader and file-loader is pretty much the same, they just generate a direct link to the files or images.
And with file-loader or url-loader, there are serval ways to add local images to your react websites.
One of them is through import statements.
Then just reference src in the img tag.
This method works well if there are only a few images, but what if there are lots of images? We can not just import them one by one.
That’s when require comes into play. We can generate the local path and use require when referencing the source in tag.
Now take a look at the following code:
You may think these are almost identical and will generate the same result. But the bottom one will actually give us an error message.
Because loaders in webpack parse through the js file before any execution of the our js code. It goes through the js files and look for dependencies, such as files in “import” and “require” statement, then use the appropriate loaders to parse file and generate the url accordingly to the rules we set up in the webpack.config.js.
For the above exmaple,
The webpack parses it and extracts the following infomation:
then it uses the following loader(if that file is within the limit):
Below is the one of the exmaple url it generates in our web app, with a file name “mudblood.jpg” :
In conclusion, most of the file handing in react is done with webpack modules, such as file-loader, or url-loader, and babel-loader for js/jsx files. If we need to reference local files in our js functions, the files also known as dependency should be imported or required.